Vue之过渡与动画

Vue之过渡与动画

 

进入&离开单元素过渡

    Vue在跟新、插入或移除DOM时，提供多种不同的过渡效果，

        1.在css过渡和动画中自动应用class，

        2.可以配合第三方的动画库，比如animate.css

        3.在过渡钩子函数中使用Javascript直接操作DOM,

        4.可以配合第三方的Javascript库，比如velocity.js

 

    过渡效果

        1.单元素/组件过渡

            1.css过渡

        /* fade对应html元素transition的name值，其他都是固定的。 */
        .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
        opacity: 0
        }

<div id="box">
        <button @click="handleClick">点击隐藏p标签</button>
        <!-- 过渡效果transition -->
        <transition name="fade">
            <p v-show="isShow">111111111</p>
        </transition>
</div>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

            2.css动画

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

　　　　　　<button @click="handleClick">点击隐藏p标签</button>

        <!-- css动画效果animate -->
        <transition name="bounce">
            <p v-show="isShow">222222222</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

            3.结合animate.css动画库

　　　　引入 <link rel="stylesheet" href="../css/animate.css"> 

　　　　　　<button @click="handleClick">点击隐藏p标签</button>

        <!-- css动画库引用的实现，首先需要引用animate.css的动画库，animated的后面就是动画的名称,可以去github上搜索animate.css查找动画的名字，进行随意的组合 -->
        <transition name=""
        enter-active-class="animated flipInX"
        leave-active-class="animated fadeOutUp">
            <p v-show="isShow">3333333333</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

        2.初始渲染过渡

            //appear   appear-active-class

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }　　　　　　

　　　　　　<button @click="handleClick">点击隐藏p标签</button>

        <!-- 一开始就呈现动画 -->
        <transition name="bounce" appear appear-active-class="bounce-enter-active">
            <p v-show="isShow">4444444444</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

        3.多个过渡元素(设置key)

            当有多个相同标签名的元素切换时，需要通过key特性设置唯一的值来标记进行各个元素的切换

            mode:in-out;out-in

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }　

        <button @click="handleClick">点击隐藏p标签</button>
        <!-- 多个元素过渡，当有多个相同标签名的元素切换时，需要通过key特性设置唯一的值来标记进行各个元素的切换，如果一个是p元素一个是div元素，那就没关系。动画效果也可以控制，添加mode属性in-out表示先来再走，意思是第二个元素实现之后在让第一个动画呈现，也有out-in效果，先走再来，mode只支持这两种模式 -->
        <transition name="bounce" mode="out-in">
            <p v-if="isShow" key="1">v-if显示</p>
            <p v-else key="2">v-else显示</p>
        </transition>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
    })

        4.多个组件过渡

　　　　可以参看上一篇文章最后一个例子

        5.列表过渡（设置key）

            transition-group不同与transition,它会以一个真实的元素呈现，默认为一个span，你也可以通过tag属性来更改为其他元素

            提供唯一的key属性

        /* css动画效果animate,确保html元素transition的name和类开始名字一致bounce */
        .bounce-enter-active{animation: bounce-in .5s;}
        .bounce-leave-active{animation: bounce-in .5s reverse;}
        @keyframes bounce-in {
            0%{transform: translateX(100px);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }　

        <!-- 多个列表过渡,使用transition-group，并对li设置key值，一般最好用data.id来设置，如果用index代替，index会有一个问题，添加的时候没问题，因为多了最后一个元素，这个没问题，删除的时候，删除的元素没问题，但是动画只会使用到最后一个元素，用data没问题，如果以后要删除元素，修改元素，或者修改位置这种，一定要设置成非index索引值，才能正常识别 -->
        <input type="text" v-model="myText">
        <button @click="addLi">add</button>
            <transition-group tag="ul" name="bounce" >
                <!-- index表示索引值 -->
                <li v-for="(data,index) in dataList" :key="data">{{data}}<button @click="delLi(index)">delete</button></li>
            </transition-group>

    var vm = new Vue({
        el:'#box',
        data:{
            myText:'',
            dataList:[],
        },
        methods: {
            addLi(){
                this.dataList.push(this.myText);
            },
            delLi(index){
                this.dataList.splice(index,1);
            },
        },
    })

        6.可复用过渡

        /* 可复用过渡 */
        .slideIn{height: 100%;position: fixed;width: 50%;background: #333;}
        .sliIn-enter-active{animation: sliIn-in .5s;}
        .sliIn-leave-active{animation: sliIn-in .5s reverse;}
        @keyframes sliIn-in {
            0%{transform: translateX(-100%);opacity: 0;}
            100%{transform: translateX(0px);opacity: 1;}
        }

         <button @click="handleClick">点击隐藏p标签</button>
       <!-- 可复用过渡,可以将这个组件进行多次的引用， -->
            <rezujian>
                <transition name="sliIn">
                    <div class="slideIn" v-if="isShow"></div>
                </transition>
            </rezujian>

    var vm = new Vue({
        el:'#box',
        data:{
            isShow:true,
        },
        methods: {
            handleClick(){
                this.isShow = !this.isShow;
            },
        },
        components:{
            rezujian:{
                template:`<slot></slot>`,
            }
        }
    })