前端动画效果开发时遇到如下问题 , 有解决办法 , 但是并不明白其中原理
问题如下 ;
页面存在 dom , 具有css属性 opacity : 0 ;
js在某一时段需要设置透明度变换的动画
会出现问题的操作方法是 :
极客观点
项目管理
HarmonyOS
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设置后需要 '适应' 一下才能起作用 , 但是并不明白真正的原理 , 希望各位大大指点;
跑一下就知道了
1.transition 过渡~ 何为过度 就是从一个起始值到一个终点站的过渡
下面是经过测试的代码~
html5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box">asdasdsadsa</div>
<input type="button" value="变" onclick="changeCSS()" />
<script>
box.style.transition="all .75s";
box.style.opacity=1;
function changeCSS(){
box.style.opacity=0.5;
}
</script>
</body>
</html>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
transition是给元素添加过渡效果的，而判断过渡效果是需要有值改变才会触发，你的transition和opacity"几乎"是同时设置的，当然不会触发transition的效果。你想想，每个元素在你还没有设置值的时候都是会有一些默认值的，比如你就放个
<div></div>上去，那么它的height默认值在chrome下是0px，这时候如果你只是想添加个初始值，在hover的时候再去改变它的高度，你刚写上transition:width 1s ease; height:100px;width:100%，你就发现它开始动起来了，显然有问题呀。你直接把
-webkit-transition:opacity 500ms linear写在css里面就可以了吧？它始终会在值改变的时候才去触发，你也不用写延迟了呀