vue-transition動畫

vue-transition動畫

官網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>

1、transition使用

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

class定義：

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

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

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

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

 

 

2、自定義過分類名

默認的.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 
}
 

3、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";
    }
}

 

4、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>

5、多個元素運動

<!-- 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>