Javascript 获取元素 CSS 过渡阶段

Question

是否可以在不使用间隔或依赖起始时间戳的情况下，通过 Javascript 获取对象处于 CSS 转换的哪个阶段？我知道转换可以串联在一起，但如果可以的话，我宁愿避免这种情况。

例如，div 经历以下转变：

@keyframes example {
  0% {background: red;}
  50% {background: blue;}
  100% {background: yellow;}
}

是否可以找到 div 是否在 0% 和 50% 之间？请纯Javascript

Answer 1

您可以在动画中分配一个属性并检索此属性值以了解动画阶段。例如，为 z-index 分配一个介于 100 和 200 之间的值：

点击元素显示动画的百分比

function showStep () {
    var ele = document.getElementById("test");
    var step = getComputedStyle(ele).getPropertyValue("z-index") - 100;
    ele.innerText = step;
}

#test {
  position: absolute;
  width: 400px;
  height: 200px;
   border: solid red 1px;
   -webkit-animation: colors 4s infinite;
   animation: colors 6s infinite;
  font-size:  80px;
  color:  white;
}


@-webkit-keyframes colors {
  0% {background: red; z-index: 100;}
  50% {background: blue;  z-index: 150;}
  100% {background: yellow; z-index: 200;}
}

@keyframes colors {
  0% {background: red; z-index: 100;}
  50% {background: blue;  z-index: 150;}
  100% {background: yellow; z-index: 200;}
}

<div id="test" onclick="showStep();">
</div>

Javascript 获取元素 CSS 过渡阶段

Javascript Get Element CSS Transition Stage

javascript

css

css-transitions