vue-transition動畫

官網(wǎng)API: https://cn.vuejs.org/v2/guide/transitions.html

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{ } 進入過渡的開始狀態(tài)，元素被插入時生效，只應用一幀后立即刪除；(運動的初始狀態(tài))

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

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

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

image

二、自定義過度類名

默認的.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相關函數(shù)

<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結(jié)合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>

五、多個元素運動

<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
      <p v-show="show" :key=""></p>
      <p v-show="show" :key=""></p>
</transition-group>