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动画

            3.结合animate.css动画库

        2.初始渲染过渡

            //appear   appear-active-class

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

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

            mode:in-out;out-in

        4.多个组件过渡

        5.列表过渡（设置key）

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

            提供唯一的key属性

        6.可复用过渡