Vue.js动画的学习

vue.js的学习1.7

1.vue动画

运动东西(元素，属性、路由….)

class定义:

.fade-enter{} //初始状态

.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)

.fade-leave{}

.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)

 .fade-enter-active, .fade-leave-active{
            transition: 1s all ease;   //设置时间1秒
        }
        .fade-enter-active{
            opacity:1;
            width:300px;
            height:300px;
        }
        .fade-leave-active{
            opacity:0;
            width:100px;
            height:100px;
        }
        .fade-enter,.fade-leave{
            opacity:0;
            width:100px;
            height:100px;
        }