vue项目中div切换显示与隐藏状态时的动画效果

// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
// el:指的是当前调用这个方法的元素对象
// done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止
beforeEnter: function (el) {
    el.style = "padding-left: 100px";
},
enter: function (el, done) {
    el.offsetHeight;
    el.style = "padding-left: 0px";
    //done();
},
//用不到可以不写
afterEnter: function (el) {},
//显示到隐藏
//用不到可以不写
beforeLeave: function (el) {},
leave: function (el, done) {
    el.offsetHeight;
    el.style = "padding-left: 0px";
    done();
},
afterLeave: function (el) {
    el.style = "padding-left: 300px";
},
复制