Question

我希望保留css动画的最终属性，但删除动画属性本身，exmeple：

@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>

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

1 个答案: