不知道为什么添加el.offsetWidth之后 vue过渡动画成功

活在今天的格子里

使用vue中的过渡动画的时候：注意在使用javascript钩子的时候动画效果是无法出来的，得要额外的添加一句el.offsetWidth ???

解释是这样的（非官方）：

引用地址点这里

原因在于浏览器不会根据你js对style的修改实时更新，而一般是在当前js修改完毕之后，会对所有修改统一更新，而display:none(它本身是不能transition的)的状态切换影响了其他过渡效果的切换，毕竟为none的元素没法触发过渡。
将offsetWidth打开，你会发现过渡生效了，原因在于取offsetWidth导致浏览器重绘，使后面的style修改前，display确确实实变为了block，从而消除了元素状态为none对过渡的这种影响。添加setTimeout，“打断”js的执行也可生效

看看下面的代码，你觉得所有的动画都会执行吗？

beforeEnter (el) {
    el.style.marginLeft = '30px'
    el.style.opacity = 0
},
enter (el) {
    console.log(el.offsetWidth)
    el.style.marginLeft = '0px'
    el.style.opacity = 1
    el.style.transition = 'all 10s ease'
},
beforeLeave (el) {
    el.style.marginLeft = '0px'
    el.style.opacity = 1
},
Leave (el) {
    console.log(el.offsetWidth)
    el.style.marginLeft = '30px'
    el.style.opacity = 0
    el.style.transition = 'all 10s ease'
}

这里直接使用 el.offsetWidth 会有个no-unused-expressions eslint 报错， 所以来个console.log(el.offsetWidth)eslint就不报错了。
这段代码是有问题的：
没有啦！
注意：done()这个回调函数，用于调用after-enter（after-leave） 中的逻辑，如果不需要可以不调用。当在leave中 使用了之后 动画过渡 就没了！

最后安利一个详细的vue文档 （就是介个链接哦！）

Vue&&TypeSprict–基础总结

我要跳出格子！