新增动画过渡效果
This commit is contained in:
parent
6f1435cd63
commit
48235b2366
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue