如何在不使用setTimeout的情况下仅对DOM中的一个元素进行多个样式更改?

Question

我想用这样一个函数来改变元素的样式

function changeStyle(element)
{
element.style.color = 'red';
element.style.marginLeft = '50px';
element.style.opacity = 0.5
}

如果不使用setTimeOut，是否有一种方法可以在之前的更改生效后才进行下一次更改?我试过使用承诺，但所有的变化仍然同时发生。

Answer 1

如果你正在寻找一个动画效果，你有使用CSS代替的选项吗?例如，你的JS代码可以切换一个类，CSS可以处理动画(注意:我绝对不是CSS动画专家，但只是想展示你如何实现这一点):

// JS
function changeStyle(element) {
element.className = 'animated';
}

// CSS
@keyframes changeStyle {
0% {
color: red;
}
49% {
margin-left: 0;
}

50% {
margin-left: 50px;
}

99% {
opacity: 1;
}
100% {
color: red;
margin-left: 50px;
opacity: .5;
}
}
.animated {
animation-name: changeStyle;
animation-duration: 3s;
animation-fill-mode: forwards;
}

下面是一个JSFiddle来演示这个操作:https://jsfiddle.net/hannahska/08v93xzy/2/