Vue_(组件)过渡效果

　　Vue.js进入/离开 & 列表过渡　　传送门

Vue_(组件)过渡效果

　　进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；

　　过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现

　　Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate.css

　　如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了

　　Learn

　　　　一、进入/离开过渡效果

　　　　二、过渡效果的钩子函数

　　　　三、Vue过渡效果+Animate.css[Animate.css　　传送门]

　　　　四、列表过渡

　　目录结构

　　 Vue_(组件)过渡效果

　　【每个demo下方都存有html源码】

一、进入/离开过渡效果　　传送门

　　进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果

　　如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式

　　过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是

　　v-enter：定义进入过渡的开始状态；

　　v-enter-active：定义进入过渡生效状态，在这里可以定义进入过渡的时间、延迟、曲线函数等；

　　v-enter-to：定义进入过渡结束状态；

　　v-leave：定义离开过渡的开始状态；

　　v-leave-active：定义离开过渡生效状态，在这里可以定义离开过渡的时间、延迟、曲线函数等；

　　v-leave-to：定义离开过渡结束状态；

　　通过Button给来控制动画的进入和离开，初始值设置flag为false

        <div id="GaryId">
            <button @click="flag = !flag">显示/隐藏</button><br />
            <!--需要添加css的div使用transition标签-->
            <transition name='fade'>
                <div v-show='flag' class="mybtn"></div>
            </transition>
        </div>

<style type="text/css">
        .mybtn{
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background-color: red;
            /*div从左到右移动位移*/
            transform: translateX(20px);
        }
        .fade-enter-active, .fade-leave-active{
            /*进入和离开时时间为2s*/
            transition: all 2s;
        }
        .fade-enter{
            /*设置透明度为0*/
            opacity: 0;
            transform: translateX(0px);
        }
        .fade-enter-to{
            opacity: 1;
            transform: translateX(20px);
        }
        .fade-leave{
            opacity: 1;
        }
        .fade-leave-to{
            opacity: 0;
            transform: translateX(0px);
        }
        
    </style>

style