溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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
}
其他更多過渡動畫方法，請看文檔：http://cn.vuejs.org/v2/guide/transitions.html
以上所述是小編給大家介紹的Vue 過渡（動畫）transition組件案例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
