顯性的過渡持續(xù)時(shí)間
在很多情況下，Vue 可以自動(dòng)得出過渡效果的完成時(shí)機(jī)。默認(rèn)情況下胀屿，Vue 會(huì)等待其在過渡效果的根元素的第一個(gè) transitionend 或 animationend 事件脆淹。然而也可以不這樣設(shè)定——比如盾饮，我們可以擁有一個(gè)精心編排的一系列過渡效果诽嘉，其中一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長(zhǎng)的過渡效果。
在這種情況下你可以用 <transition> 組件上的 duration prop 定制一個(gè)顯性的過渡持續(xù)時(shí)間 (以毫秒計(jì))：
<transition :duration="1000">...</transition>
你也可以定制進(jìn)入和移出的持續(xù)時(shí)間：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
完整案例：
<template>
<div id="app">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<!-- 顯性的過渡持續(xù)時(shí)間 -->
<!-- 用 <transition> 組件上的 duration prop 定制一個(gè)顯性的過渡持續(xù)時(shí)間 (以毫秒計(jì))
:duration="1000"
:duration="{ enter: 500, leave: 800 }"定制進(jìn)入和移出的持續(xù)時(shí)間 -->
<transition
:duration="10000"
enter-active-class="animate__animated animate__swing"
leave-active-class="animate__animated animate__shake"
>
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
show: true
}
},
mounted() {
},
components:{
},
methods:{
}
}
</script>
<style scoped>
</style>
