aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Ayer, David Walsh nos mostraba una técnica para detectar elementos insertados en nuestro DOM mediante animaciones CSS. Para ello usaremos javascript, pero no el elemento «deprecated» DOMNodeInserted de la DOM Event Reference.

Veamos el código

<ul id="parentElement"></ul>
<style type="text/css">
/* Definimos las animaciones */

/* La estándar */
@keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de Firefox ¬¬ */
@-moz-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de WebKit ¬¬! */
@-webkit-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de IE ¬¬!! */
@-ms-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/* La de Opera ¬¬!!!*/
@-o-keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}

/*
Definimos las duraciones
para toooodos los navegadores
*/
#parentElement > li {
	animation-duration: 0.001s;
	-o-animation-duration: 0.001s;
	-ms-animation-duration: 0.001s;
	-moz-animation-duration: 0.001s;
	-webkit-animation-duration: 0.001s;

	animation-name: nodeInserted;
	-o-animation-name: nodeInserted;
	-ms-animation-name: nodeInserted;
	-moz-animation-name: nodeInserted;
	-webkit-animation-name: nodeInserted;
}

</style>
<script type="text/javascript">
	var insertListener = function(event){	
		// Detectamos el nombre de la animación lanzada
		if (event.animationName == "nodeInserted") {
			console.warn("Another node has been inserted! ", event, event.target);
			}
		}

// Asociamos los la anterior funcionalidad al evento "animationstart"
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
</script>

Como podemos ver en el código, la técnica usada pasa por definir las animaciones CSS (en todos y cada uno de los navegadores, bufff! ) a las que se les asigna un nombre, después, usando la gestión de eventos asociamos (otra vez para los diferentes navegadores ¬¬) la función insetListener() que se encargará de comprobar que al accionar el evento animationstart se esté accionando la animación previamente definida. A nivel académico, me parece realmente interesante, aunque quizás un poco laborioso para implementar en el día a día.