Как сохранить конечное состояние анимации 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. 
} 

И теперь мне нужно очистить:

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