// 以下两个与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 的影响。