Estoy tratando de hacer que el elemento desaparezca al final de la animación, pero no funciona, ¿alguien puede explicar cómo hacer que la animación de salida desaparezca al final?:
var test = document.getElementById("test"); test.addEventListener("click", displayOpacity); function displayOpacity(event){ event.target.style.animation = "changeOpacity 1s linear"; if(event.target.style.opacity === 0){ event.target.style.display = "none"; } } .container .test { text-align: center; padding: 100px; color: #fff; background-color: #00f; max-width: 500px; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes changeOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes changeOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } <body> <div class="container"> <div class="test" id="test">Custom Text</div> </div> <script src="main.js"></script> </body>Ya que ha etiquetado jQuery , ¿no sería más fácil hacerlo con .fadeOut() ? El atributo de display del elemento se establece en none justo después de que finaliza la animación.
$('#test').click(function(){ $(this).fadeOut(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='test'>Text</div>El tiempo de animación es de 1 segundo.
event.target.style.animation = "changeOpacity 1s linear";así que solo haz un tiempo de espera
setTimeout(function(){ event.target.style.display = "none"; },1000)Su problema se debe a que el animation-fill-mode no se respeta, ya que lo está sobrescribiendo al establecer la regla de animation directamente en el elemento mismo.
Para solucionar esto, cambie su código JS para agregar una clase en el elemento y coloque la regla de animation allí, junto con el modo de relleno requerido:
var test = document.getElementById("test"); test.addEventListener("click", displayOpacity); function displayOpacity(event) { this.classList.add('changeOpacity'); } .container .test { text-align: center; padding: 100px; color: #fff; background-color: #00f; max-width: 500px; } .changeOpacity { animation: changeOpacity 1s linear forwards; } @-webkit-keyframes changeOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes changeOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes changeOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } <div class="container"> <div id="test" class="test"> Test </div> </div>