活在今天的格子里
使用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中 使用了之后 动画过渡 就没了!