Vue——關於css過渡和動畫那些事

1. 單元素/組件的過渡transition

　　Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展示 (使用 v-show)
• 動態組件
• 組件根節點

實例：

<style> .fade-enter,.fade-leave-to{ opacity: 0;
    } .fade-enter-active,.fade-leave-active{ transition: opacity .5s;
    }
</style>

<!-- fade是自定義的名稱，會被當成類的前綴 "fade-enter" -->
<div id="app"> <transition name="fade"> <div v-if="show"><h1>show</h1></div> </transition> <button @click="handleChange">change</button> </div>

<script>
    new Vue({ el: '#app', data:{ show: true }, methods:{ handleChange:function(){ this.show = !this.show; } } }) </script>

2. 過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

關於過渡類名：

　　如果你使用一個沒有名字的 <transition>，則 v-是這些類名的默認前綴。

　　如果你使用了 <transition name="my-transition">，那么 v-enter 會替換為 my-transition-enter

3. 關於@keyframe 動畫 （此處省略）

4. VUE中使用第三方animate.css 庫,  （animate.css庫提供的動畫是@keyframe的Css3的動畫） 

　　首先link引入animate.css，然后結合自定義過渡的類名  enter-active-class、leave-active-class，

　　animated是必須要寫的，hinge shake是引入的動畫效果

<div id="app">
    <transition enter-active-class="animated hinge" leave-active-class="animated shake">
        <div v-if="show">show</div>
    </transition>
    <button @click="handleChange">change</button>
</div>

<script>
    new Vue({
        el: '#app',
        data:{
            show: true
        },
        methods:{
            handleChange:function(){
                this.show = !this.show;
            }
        }
    })
</script>

 5. 如何在頁面加載完成后元素第一次顯示時也具備動畫效果？

　　使用appear 和 appear-active-class

<div id="app">
    <transition 
        appear 
        enter-active-class="animated swing fade-enter-active" 
        leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing">
    <div v-if="show">show</div>
    </transition>
    <button @click="handleChange">change</button>
</div>

 6. 同時使用過渡和動畫

<style> .fade-enter,.fade-leave-to{ opacity: 0;
    } .fade-enter-active, .fade-leave-active{ transition: opacity 3s;
    }
</style>

<div id="app">
    <transition 
        :duration="{enter:5000, leave:10000}" //duration設置動畫時間
               name="fade"
                appear 
                enter-active-class="animated swing fade-enter-active" 
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
        <div v-if="show"><h3>show</h3></div>
    </transition>
    <button @click="handleChange">change</button>
</div>

<script>
    new Vue({ el: '#app', data:{ show: true }, methods:{ handleChange:function(){ this.show = !this.show; } } }) </script>

 7. Vue中多個元素或組件的過渡

• 多個元素的過渡

先上例子：2個元素切換過渡效果

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity .5s;
    }
</style>

<div id="app">
<!-- 這有2個div，點擊按鈕切換顯示div內容，
　　 但是需要注意：VUE默認會復用dom元素，導致過渡效果不顯示，
　　 解決： 添加唯一值key屬性可以標識獨立的dom，避免復用 
　　　　mode是transition自帶的屬性，可以是out-in 或者 in-out -->

    <transition mode="out-in">
        <div v-if="show" key="hello">hello vue</div>
        <div v-else key="Bye">Bye Vue</div>
    </transition>
    <button @click="handleClick">change</button>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            show: true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show;
            }
        }
    })
</script>

• 多個組件的過渡

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity .5s;
    }
</style>

<div id="app">
    <transition mode="in-out">
<!-- <child v-if="show"></child>
     <child-one v-else></child-one> -->
<!-- 動態組件 -->
    <component :is="type"></component>
    </transition>
    <button @click="handleClick">change</button>
</div>

<script>
    Vue.component('child',{
        template: '<div>child</div>'
    });
    Vue.component('child-one',{
        template: '<div>child-one</div>'
    })
    var vm = new Vue({
        el: '#app',
        data:{
            type: 'child'
        },
        methods:{
            handleClick:function(){
                this.type = (this.type === 'child'?'child-one' : 'child');
            }
        }
    })
</script>

 8. 列表過渡使用  transition-group

<div id="app">
    <transition-group>
    <div v-for="item  of list" :key="item.id">
        {{item.title}}-{{item.id}}
    </div>
    </transition-group>
    <button @click="handleAdd">Add</button>
</div>

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity 1s;
    }
</style>

<script>
    var count = 0;
    new Vue({
        el: '#app',
        data:{
            list:[]
        },
        methods:{
            handleAdd:function(){
                this.list.push({
                    id: count++,
                    title: 'hello vue'
                })
            }
        }
    })
</script>