weipengfei
/
dataV-xunfei
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增动画过渡效果

This commit is contained in:
weipengfei 2023-10-13 14:26:07 +08:00
parent 6f1435cd63
commit 48235b2366
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/chat/index.vue
View File

@ -76,7 +76,6 @@ const changeRecord = ()=>{
else { else {
RecordXunfei() RecordXunfei()
recordFalg.value = 0 recordFalg.value = 0
nowStatus.value = 'loding'
} }
} }
@ -629,9 +628,11 @@ const click = () => {
<template> <template>
<div class="flex w-full h-full my-layout"> <div class="flex w-full h-full my-layout">
<indexBG v-if="!isMobile"> <indexBG v-if="!isMobile">
<recording v-if="nowStatus=='record'"></recording> <transition mode="out-in" name="fade">
<loding v-else-if="nowStatus=='loding'"></loding> <recording v-if="nowStatus=='record'" key="record"></recording>
<inputing v-else></inputing> <loding v-else-if="nowStatus=='loding'" key="loding"></loding>
<inputing v-else key="input"></inputing>
</transition>
</indexBG> </indexBG>
<div class="flex flex-col w-full h-full" :style="{'max-width': maxWeight + 'px'}"> <div class="flex flex-col w-full h-full" :style="{'max-width': maxWeight + 'px'}">
<HeaderComponent <HeaderComponent
@ -771,4 +772,15 @@ const click = () => {
justify-content: center; justify-content: center;
align-items: 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> </style>