新增动画过渡效果

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

View File

@ -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>