站内搜索:
首页 >> 前端 >> 内容
Vue.js动画的学习

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

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

  • 上一篇:readyState的5种状态含义介绍
  • 下一篇:页面水平居中代码实现
  • 返回顶部