同時使用過渡和影片
點擊打開視頻講解更加詳細
Vue 為了知道過渡的完成，必須設定相應的事件監聽器，它可以是 transitionend 或 animationend，這取決于給元素應用的 CSS 規則，如果你使用其中任何一種，Vue 能自動識別型別并設定監聽，
但是，在一些場景中，你需要給同一個元素同時設定兩種過渡動效，比如 animation 很快的被觸發并完成了，而 transition 效果還沒結束，在這種情況中，你就需要使用 type attribute 并設定 animation 或 transition 來明確宣告你需要 Vue 監聽的型別，
完整案例：
<template>
<div id="app">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<!-- 同時使用過渡和影片 -->
<!-- 第一個animated是必須添加的樣式名，第二個是指定的影片樣式名，如果影片是無限播放的，可以添加 第三個class infinite， -->
<!-- animate.css這個影片效果，點擊查看animate.css庫，可以看到持續時間只有1s，但是過渡的效果在文中我定義了3s，那么整個程序是1s還是3s? -->
<!-- 使用 type attribute 并設定 animation 或 transition 來明確宣告你需要 Vue 監聽的型別 -->
<transition
type="animation"
name="fade"
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>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504467.html
標籤：其他
上一篇：webgl(three.js)實作室內三維定位,3D定位,3D樓宇bim、實時定位三維可視化解決方案——第十四課（定位升級版）