js控制transition 失效问题

Question

前端动画效果开发时遇到如下问题 , 有解决办法 , 但是并不明白其中原理

问题如下 ;

页面存在 dom , 具有css属性 opacity : 0 ;

js在某一时段需要设置透明度变换的动画

会出现问题的操作方法是 :

dom.style.cssText += ';-webkit-transition:opacity 500ms linear ; opacity:1;';

这样操作并不会按照过度执行动画 , 解决办法如下 :

dom.style.cssText += ';-webkit-transition:opacity 500ms linear ;';

setTimeout(()=>{

    dom.style.opacity = '1' ;

} , 50)

这样就能起到作用;

个人理解为 transition设置后需要 '适应' 一下才能起作用 , 但是并不明白真正的原理 , 希望各位大大指点

Answer 1

transition是给元素添加过渡效果的，而判断过渡效果是需要有值改变才会触发，你的transition和opacity"几乎"是同时设置的，当然不会触发transition的效果。你想想，每个元素在你还没有设置值的时候都是会有一些默认值的，比如你就放个<div></div>上去，那么它的height默认值在chrome下是0px，这时候如果你只是想添加个初始值，在hover的时候再去改变它的高度，你刚写上transition:width 1s ease; height:100px;width:100%，你就发现它开始动起来了，显然有问题呀。你直接把-webkit-transition:opacity 500ms linear写在css里面就可以了吧？它始终会在值改变的时候才去触发，你也不用写延迟了呀