Tengo un efecto de animación CSS que hace que el texto parpadee 3 veces. Quiero que restablezca su estado cada vez que obtenga una respuesta diferente (en el ejemplo a continuación, los botones actúan como respuesta)
¿Cómo podría lograr restablecer el estado de la animación CSS a través de jQuery?
(function($) { $.fn.replaceClass = function(pFromClass, pToClass) { return this.removeClass(pFromClass).addClass(pToClass); }; }(jQuery)); $("#true").click(function() { $('#animate').replaceClass('false flashit', 'true flashit'); console.log("True clicked"); }); $("#false").click(function() { $('#animate').replaceClass('true flashit', 'false flashit'); console.log("False clicked"); }); @-webkit-keyframes flash { 0%, to { opacity: 1 } } @keyframes flash { 0%, to { opacity: 1 } } .flashit { -webkit-animation: flash linear 1s 3; -moz-animation: flash linear 1s 3; animation: flash linear 1s 3 } .true { color: green } .false { color: red } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="animate">I am going to get animated!</span> <div> <p style="margin-bottom:5px">These buttons are acting as response</p> <button id="true">True</button> <button id="false">False</button> </div>El problema parece ser que agregar inmediatamente la clase flashit nuevamente al elemento después de eliminarlo no registra que la clase se agregó nuevamente.
Al agregar un setTimeout dentro de su función de reemplazo después de eliminar la clase, funciona. Tenga en cuenta que no hay un retraso especificado para el tiempo de espera, por lo que básicamente solo esperamos a que finalice la parte removeClass y luego programamos inmediatamente la ejecución de addClass .
(function($) { $.fn.replaceClass = function(pFromClass, pToClass) { this.removeClass(pFromClass) setTimeout(() => { this.addClass(pToClass); }); return this; }; }(jQuery)); $("#true").click(function() { $('#animate').replaceClass('false flashit', 'true flashit'); console.log("True clicked"); }); $("#false").click(function() { $('#animate').replaceClass('true flashit', 'false flashit'); console.log("False clicked"); }); @-webkit-keyframes flash { 0%, to { opacity: 1 } } @keyframes flash { 0%, to { opacity: 1 } } .flashit { -webkit-animation: flash linear 1s 3; -moz-animation: flash linear 1s 3; animation: flash linear 1s 3 } .true { color: green } .false { color: red } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="animate">I am going to get animated!</span> <div> <p style="margin-bottom:5px">These buttons are acting as response</p> <button id="true">True</button> <button id="false">False</button> </div>