如何保持动画 CSS 的最终状态并删除动画属性？

Question

我想保留 css 动画的最终属性，但删除动画属性本身，例如：

@keyframes('foo')
{
  0% { opacity: 0; }
  to { opacity: 1; }
}

开头：

.my_element
{
   opacity: 0;
}

我通过 Javascript 应用动画，所以我得到了：

.my_element
{
   opacity: 0;
}

element.style
{
   animation: foo 1s forwards; #with opacity: 1; at the end.
}

现在我需要清理：

.my_element
{
   opacity: 0;
}

element.style 
{
  opacity: 1;
}

我该怎么做？

Answer 1

这完全符合您的要求。在animationEnd 上，cleanUp 函数被传递一个对象，该对象包含动画后要移除的类、元素上要替换的属性以及元素上要替换的属性值。在单击按钮之前和之后检查 DOM，您会发现它可以正常工作。

var el      = document.querySelector(".my_element"),
    cleanUp = function(data) {
      el.classList.remove(data.remove);
      el.style[data.prop] = data.val;
    },
    startAnimation = function() {
      el.classList.add("animate");
    };

el.addEventListener("animationend", function() {
  var cleanup_data = {
    remove: "animate",
    prop: "opacity",
    val: 1
  };
  
  cleanUp(cleanup_data);
});

@keyframes foo {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate {
  animation: foo 3s forwards;
}

.my_element {
  opacity: 0;
}

<div class="my_element">some text</div>
<button onclick="startAnimation()">Start Animation</button>