您现在的位置:首页 >> 前端 >> 内容

Vue.js动画的学习

时间:2018/3/30 14:41:10 点击:

  核心提示:Vue.js的学习1.71.vue动画运动东西(元素,属性、路由.)class定义:.fade-enter{} //初始状态.fade-enter-active{} //变化成什么样 - 当元素出来(...

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;
        }

Tags:VU UE EJ JS 
作者:网络 来源:Srain13的博客