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

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。