前端动画效果开发时遇到如下问题 , 有解决办法 , 但是并不明白其中原理
问题如下 ;
页面存在 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设置后需要 '适应' 一下才能起作用 , 但是并不明白真正的原理 , 希望各位大大指点;
transition
是给元素添加过渡效果的,而判断过渡效果是需要有值改变
才会触发,你的transition
和opacity
"几乎"是同时设置的,当然不会触发transition
的效果。你想想,每个元素在你还没有设置值的时候都是会有一些默认值的,比如你就放个
<div></div>
上去,那么它的height
默认值在chrome下是0px
,这时候如果你只是想添加个初始值,在hover的时候再去改变它的高度,你刚写上transition:width 1s ease; height:100px;width:100%
,你就发现它开始动起来了,显然有问题呀。你直接把
-webkit-transition:opacity 500ms linear
写在css里面就可以了吧?它始终会在值改变的时候才去触发,你也不用写延迟了呀