欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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