顯性的過渡持續時間
點擊打開視頻講解更加詳細
在很多情況下，Vue 可以自動得出過渡效果的完成時機，默認情況下，Vue 會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件，然而也可以不這樣設定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比于過渡效果的根元素有延遲的或更長的過渡效果，
在這種情況下你可以用
<transition :duration="1000">...</transition>
你也可以定制進入和移出的持續時間：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
完整案例：
<template>
<div id="app">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<!-- 顯性的過渡持續時間 -->
<!-- 用 <transition> 組件上的 duration prop 定制一個顯性的過渡持續時間 (以毫秒計)
:duration="1000"
:duration="{ enter: 500, leave: 800 }"定制進入和移出的持續時間 -->
<transition
:duration="10000"
enter-active-
leave-active-
>
<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>
若對您有幫助，請點擊跳轉B站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504469.html
標籤：其他