同時使用過渡和動畫 點擊打開視頻講解更加詳細 Vue 為了知道過渡的完成,必須設置相應的事件監聽器。它可以是 transitionend 或 animationend,這取決於給元素應用的 CSS 規則。如果你使用其中任何一種,Vue 能自動識別類型並設置監聽。 但是,在一些場景中,你需要給同一個元 ...
同時使用過渡和動畫
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-class="animate__animated animate__swing fade-enter-active"
leave-active-class="animate__animated animate__shake fade-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>