Vue過渡(動畫)- transition元件
阿新 • • 發佈:2019-01-04
Vue過度(動畫),本質走的是CSS3:transtion,animation。
控制器div顯示/隱藏,程式碼如下:
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<div id="div1" v-show="isShow"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box' ,
data:{
isShow:false
},
methods:{
toggle(){
this.isShow = !this.isShow;
}
}
});
</script>
我們已經實現了對div的顯示/隱藏,但是沒有過渡(動畫)效果。
1.單元素/元件的過渡
Vue提供了transition
的封裝元件,在下列情況中,可以給任何元素和元件新增”進入”和”離開”過渡動畫。
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態元件
元件根節點
改造:
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<transition name="fade">
<div id="div1" v-show="isShow" transiton="fade"></div>
</transition>
</div >
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}