Vue.js動畫筆記

一、Vue.js中的元素動畫或頁面跳轉動畫有多種實現方式好比：css

一、本身手動寫CSS3動畫來實現
二、使用第三方CSS動畫庫如：Animate.css
三、在構子函數中操做DOM
四、使用第三方Js動畫庫如：Velocity.js

二、Vue.js官方提供了默認的動畫組件 transition ，例子：數組

<div id="demo">
    <button @click='show=!show'>切換</button>
    <transition name='fade'>       //將須要執行動畫的元素包裹在transition標籤中，並制定動畫名稱
        <p v-if='show'>Hello</p>
    </transition>
</div>

new Vue({
    el:'demo',
    data:{
        show:true
    }
})

.fade-enter-active,.fade-leave-active{
    transition:opacity .5s
}
.fade-enter,.fade-leave-to{
    opacity:0
}
transition執行：目標元素是否應用CSS過渡或動畫(增刪類名)-->調用構子函數

三、transition過渡的類名app

狀態A-->狀態B
    v-enter:元素初始狀態
    v-enter-to:動畫結束後狀態
    v-enter-active:動畫過渡過程，用來定義動畫時間、延遲、曲線函數
狀態B-->狀態A
    v-leave:返回動畫執行前狀態
    v-leave-to:返回動畫執行後狀態
    v-leave-active:返回動畫過渡過程，用來定義動畫時間、延遲、曲線函數
見官網圖以下：（ V 表明動畫的類名）

四、使用CSS動畫dom

<div id='demo'>
    <button @click='show=!show'>切換</button>
    <transition name='bounce'>
        <p v-show='show'>Hello</p>
    </transition>
</div>

new Vue({
    el:'#demo',
    data:{
        show:true
    }
})

.bounce-enter-active{
    animation:bounce-in .5s;
}
.bounce-leave-active{
    animation:bounce-in .5s reverse;
}

@keyframes bounce{
    0%{
        transform:scale(0)
    }
    50%{
        transform:scale(1.5)
    }
    100%{
        transform:scale(1)
    }
}

五、使用第三方CSS動畫庫 Animate.css函數

經過如下特性自定義過渡類名(可結合第三方CSS庫)：
    enter-class
    enter-to-class
    enter-active-class
    leave-active
    leave-to-class
    leave-active-class
    
<div id='demo'>
    <button @click='show=!show'>切換</button>
    <transition name='custom-classes-trandition' enter-active-class='animated tada' leave-active-class='animated bounceOutRight'>
       <p>Hello</p>
    </transition>
</div>

new Vue({
    el:'demo',
    data:{
        show:true
    }
})

六、動畫過渡時間oop

<transition :duration="1000">...</transition>    //設置1000毫秒時間
<transition :duration="{enter:500,leave:800}">...</transition>    //設置進入時間和回退時間

七、Vue.js的JavaScript動畫構子函數動畫

<transition @before-enter='beforeEnter'
            @enter='enter'
            @after-enter='afterEnter'
            @enter-cancelled='enterCancelled'
            
            @before-leave='beforeLeave'
            @leave='leave'
            @after-leave='afterLeave'
            @leave-cancelled='leaveCancelled'
            :css='false' >         
</transition>
//對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測

methods:{
    beforeEnter:function(el){},
    enter:function(el,done){
        done();  //當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回調   
    },
    afterEnter:function(el){},
    enterCancelled:function(el){},
    beforeLeave:function(el){},
    leave:function(el){
        done();
    },
    afterLeave:function(el){},
    leaveCancelled:function(el){}
}
//鉤子函數能夠結合 CSS transitions/animations 使用，也能夠單獨使用

八、使用第三方JavaScript動畫庫Velocity.jsthis

<div id="demo">
    <button @click="show = !show">切換</button>
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false" >
        <p v-if="show">Hello</p>
    </transition>
</div>

new Vue({
    el: '#demo',
    data: {
        show: false
    },
    methods: {
        beforeEnter: function (el) {
            el.style.opacity = 0
            el.style.transformOrigin = 'left'
        },
        enter: function (el, done) {
            Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
            Velocity(el, { fontSize: '1em' }, { complete: done })
        },
        leave: function (el, done) {
            Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
            Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
            Velocity(el, {
                rotateZ: '45deg',
                translateY: '30px',
                translateX: '30px',
                opacity: 0
            }, { complete: done })
         }
     }
})

九、經過 appear 特性設置節點在初始渲染的過渡spa

<transition appear> </transition>

自定義過渡類名：
<transition appear
    appear-class="custom-appear-class"
    appear-to-class="custom-appear-to-class"
    appear-active-class="custom-appear-active-class">
</transition>

自定義JavaScript構子：
<transition appear
    @before-appear='BeforeAppearHook'
    @appear='AppearHook'
    @after-appear='AfterAppearHook'
    @appear-cancelled='AppearCancelledHook'>
</transition>

十、多個元素的過渡（使用key）code

<transition>
    <button :key="docState">
        {{ buttonMessage }}
    </button>
</transition>

computed: {
    buttonMessage: function () {
        switch (this.docState) {
            case 'saved': return '編輯'
            case 'edited': return '保存'
            case 'editing': return '取消'
        }
    }
}

過渡模式
    out-in  當前元素先進行過渡，完成以後新元素過渡進入
    in-out  新元素先進行過渡，完成以後當前元素過渡離開
<transition name="fade" mode="out-in"> </transition>

十、多個組件的過渡（使用動態組件）

<transition name="component-fade" mode="out-in">
    <component v-bind:is="view"></component>
</transition>

new Vue({
    el:'demo',
    data:{
        view:'v-a'
    },
    components:{
        'v-a':{
            template:`<div>組件A</div>`
        },
        'v-b':{
            template:`<div>組件B</div>`
        }
    }
})

.component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
    opacity: 0;
}

十一、<transition-group> 組件實現列表的過渡

<transition-group>組件會渲染成<span>標籤，可經過 tag 特性更換爲其餘元素。
目標元素必須提供惟一的 key 值

<div id='demo'>
    <button @click='add'>添加</button>
    <button @click='remove'>刪除</button>
    <button @click='shuffle'>打亂</button>
    <transition-group name='list' tag='div'>
        <span v-for='item in items' :key='item' class='list-item'>
            {{item}}
        </span>
    </transition-group>
</div>

//_.shuffl(arr) 隨機打亂數組，並返回被打亂的數組
//arr.splice(index,0,item) 在index位置添加一個 item 元素
//arr.splice(index,1) 在index位置刪除1個元素

new Vue({
    el:'demo',
    data:{
        items:[1,2,3,4,5,6,7,8,9],
        nextNum:10
    },
    methods:{
        randomIndex:function(){    //返回1~9之間的隨機數
            return Math.floor(Math.random()*this.items.length)
        },
        add:function(){
            this.items.splice(this.randomIndex,0,nextNum++);    //在隨機的位置添加一個數
        },
        remove:function(){
            this.items.splice(this.randomIndex,1);    //在隨機的位置刪除一個數
        },
        shuffle:function(){
            this.items=_.shuffle(this.items);    //返回順序被打亂的數組
        }
    }
})

.list-item{
    transition:all 1s;
    display:inline-block;
    margin-right:10px;
}
.list-leave-active {
    position: absolute;
}
.list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

十二、與JavaScript交互實現交錯過渡（Velocity.js）

<div id='demo'>
    <input v-model='query'>    //根據用戶輸入篩選顯示列表中符合項+動畫
    <transition-group name='fade' tag='ul' :css='false' @before-enter='beforeEnter' @enter='enter' @leave='leave'>
        <li v-for='(item,index) in items' :key='item.msg' :data-index='index'>
            {{item.msg}}
        </li>
    </transition-group>
</div>

new Vue({
    el:'#demo',
    data:{
        query:'',
        list:[
            {msg:'then'},
            {msg:'reject'},
            {msg:'undefiend'},
            {msg:'resolve'}
        ]
    },
    computed:{
        showList:function(){
            var vm=this;
            return this.list.filter(function(item){
                return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !==-1
            })
        }
    },
    methods:{
        beforeEnter:function(el){
            el.style.opacity=0;
            el.style.height=0;
        },
        enter:function(el,done){
            var delay=el.dataset.index*150;
            setTimeout(function(){
                Velocity(
                      el,
                      { opacity: 1, height: '1.6em' },
                      { complete: done }
                )
            }, delay)
        },
        leave:function(el,done){
            var delay = el.dataset.index * 150
            setTimeout(function () {
                Velocity(
                    el,
                    { opacity: 0, height: 0 },
                    { complete: done }
                )
            }, delay)
        }
    }
})

1三、建立可複用的過渡

//任務：只需將須要實現動畫的元素或列表放入該過渡組件中便可實現相應的動畫
方式一：
Vue.component('my-special-transition', {
    template: '\
        <transition\
            name="very-special-transition"\
            mode="out-in"\
            v-on:before-enter="beforeEnter"\
            v-on:after-enter="afterEnter"\
        >\
            <slot></slot>\
        </transition>\
      ',
    methods: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
    }
})

函數組件更適合完成這個任務：
Vue.component('my-special-transition', {
    functional: true,
    render: function (createElement, context) {
        var data = {
            props: {
                name: 'very-special-transition',
                mode: 'out-in'
            },
            on: {
                beforeEnter: function (el) {
                  // ...
                },
                afterEnter: function (el) {
                  // ...
                }
            }
        }
        return createElement('transition', data, context.children)
    }
})

1四、動態過渡（根據組件的狀態設置不一樣的過渡動畫）

<transition :name="transitionName"> </transition>
//經過事件的鉤子函數方法，能夠在獲取到相應上下文數據。這意味着，能夠根據組件的狀態經過 JavaScript 過渡設置不一樣的過渡效果
//最終方案是組件經過接受 props 來動態修改以前的過渡。一句老話，惟一的限制是你的想象力。