新增动画过渡效果

src/views/chat/index.vue

@@ -76,7 +76,6 @@ const changeRecord = ()=>{
   else {
     RecordXunfei()
     recordFalg.value = 0
-		nowStatus.value = 'loding'
   }
 }
 
@@ -629,9 +628,11 @@ const click = () => {
 <template>
 	<div class="flex w-full h-full my-layout">
 		<indexBG v-if="!isMobile">
-			<recording v-if="nowStatus=='record'"></recording>
-			<loding v-else-if="nowStatus=='loding'"></loding>
-			<inputing v-else></inputing>
+			<transition  mode="out-in" name="fade">
+				<recording v-if="nowStatus=='record'" key="record"></recording>
+				<loding v-else-if="nowStatus=='loding'" key="loding"></loding>
+				<inputing v-else key="input"></inputing>
+			</transition>
 		</indexBG>
 		<div class="flex flex-col w-full h-full" :style="{'max-width': maxWeight + 'px'}">
 			<HeaderComponent
@@ -771,4 +772,15 @@ const click = () => {
 	justify-content: center;
 	align-items: center;
 }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+  transition-timing-function: ease-in-out; /* 调整缓动函数 */
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
 </style>