demo點擊顯示與消失

<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition> </div> <script> new Vue({el: '#demo',data: {show: true} }) </script> <style> .fade-enter-active, .fade-leave-active {transition: opacity .5s } .fade-enter, .fade-leave-active {opacity: 0 } </style>

一、transition使用

<transition name="fade">運動東西(元素，屬性、路由....) </transition>

class定義：

.fade-enter{ } 進入過渡的開始狀態，元素被插入時生效，只應用一幀后立即刪除；(運動的初始狀態)

.fade-enter-active{ } 進入過渡的結束狀態，元素被插入時就生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

.fade-leave{ } 離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立即刪除；

.fade-leave-active{ } 離開過渡的結束狀態，元素被刪除時生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

二、自定義過度類名
默認的.fade-enter變成.fade-in-enter;

默認的.fade-enter-active變成.fade-in-active;

默認的.fade-leave變成.fade-out-enter;

默認的.fade-leave-active變成.fade-out-active;

<transition name="fade"enter-class="fade-in-enter"enter-active-class="fade-in-active"leave-class="fade-out-enter"leave-active-class="fade-out-active"><p v-show="show">hello</p> </transition> .fade-in-active, .fade-out-active{transition: all 0.5s ease } .fade-in-enter, .fade-out-active{opacity: 0 }

三、transition相關函數

<transition name="fade"@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave" ><p v-show="show"></p> </transition> methods:{beforeEnter(el){console.log('動畫enter之前');},enter(el){console.log('動畫enter進入');},afterEnter(el){console.log('動畫進入之后');el.style.background="blue";},beforeLeave(el){console.log('動畫leave之前');},leave(el){console.log('動畫leave');},afterLeave(el){console.log('動畫leave之后');el.style.background="red";} }

四、transition結合animate.css使用。

<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"><p v-show="show" class="animated"></p> </transition> 或者 <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"><p v-show="show"></p> </transition>

五、多個元素運動

<!-- key一般是循環遍歷出來的 --> <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"><p v-show="show" :key=""></p><p v-show="show" :key=""></p> </transition-group>

總結

以上是生活随笔為你收集整理的vue-transition动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。