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>