どのようにアニメーションCSSの最終状態を維持し、アニメーションプロパティを削除しますか？

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. 
} 

そして今、私はクリーンアップが必要です。

を

どうすればいいですか？

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>