Vue——關於css過渡和動畫那些事
阿新 • • 發佈:2018-08-13
leave vuejs show -- css ive 一個 title active
1. 單元素/組件的過渡
Vue 提供了 transition
的封裝組件,在下列情形中,可以給任何元素和組件添加進入/離開過渡
- 條件渲染 (使用
v-if
) - 條件展示 (使用
v-show
) - 動態組件
- 組件根節點
實例:
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s;
}
</style>
<!-- fade是自定義的名稱,會被當成類的前綴 "fade-enter" -->
<div id="app">
<transition name="fade">
<div v-if="show"><h1>show</h1></div>
</transition>
<button @click="handleChange">change</button>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
show: true
},
methods:{
handleChange:function(){
this.show = !this.show;
}
}
})
</script>
2. 過渡的類名
在進入/離開的過渡中,會有 6 個 class 切換:v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to
關於過渡類名:
如果你使用一個沒有名字的 <transition>
,則 v-
是這些類名的默認前綴。
如果你使用了 <transition name="my-transition">
,那麽 v-enter
會替換為 my-transition-enter
3. 關於動畫 (此處省略)
4. vue中使用第三方animate.css 庫
首先link引入animate.css,然後結合自定義過渡的類名 enter-active-class、leave-active-class,
animated是必須要寫的,hinge shake是引入的動畫效果
<div id="app">
<transition enter-active-class="animated hinge" leave-active-class="animated shake">
<div v-if="show">show</div>
</transition>
<button @click="handleChange">change</button>
</div>
<script> new Vue({ el: ‘#app‘, data:{ show: true }, methods:{ handleChange:function(){ this.show = !this.show; } } }) </script>
Vue——關於css過渡和動畫那些事