Vue.js动画的学习
程序员文章站
2022-03-02 10:57:06
vue.js的学习1.7
1.vue动画
运动东西(元素,属性、路由….)
class定义:
.fade-enter{} //初始状态
.fade-ente...
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; }
上一篇: 前端行内元素代码实例