Detekce vložení uzlů DOM pomocí JavaScriptu a animací CSS

Pracuji s úžasným obsazením vývojářů v Mozille a jedním z nich je Daniel Buchner. Daniel se se mnou podělil o úžasnou strategii pro zjišťování, kdy byly uzly vloženy do nadřazeného uzlu, bez použití zastaralého DOM Events API. Tento hack používá JavaScript, jak byste očekávali, ale další technologii, kterou byste nečekali:animace CSS. Dovolte mi, abych vám dokázal, že to funguje!

HTML

Vše, co je vyžadováno, je nadřazený prvek, pomocí kterého bychom chtěli poslouchat vkládání uzlů v:

<ul id="parentElement"></ul>

Můžete použít libovolného pomocníka pro výběr, ale zde jsem zvolil ID.

CSS

Abychom získali kontrolu nad detekcí vkládání uzlů, musíme nastavit sérii animací klíčových snímků, které se spustí po vložení uzlu. Vlastnost clip se používá, protože nemá žádný vliv na samotný uzel:

/* set up the keyframes; remember to create prefixed keyframes too! */
@keyframes nodeInserted {  
	from { opacity: 0.99; }
	to { opacity: 1; }  
}

S vytvořenými klíčovými snímky je třeba animaci aplikovat na prvky, které chcete poslouchat. Všimněte si malého trvání; který uvolní stopu animace v prohlížeči.

#parentElement > li {
    animation-duration: 0.001s;
    animation-name: nodeInserted;
}

Přidejte animaci k podřízeným uzlům, které posloucháte. Po skončení animace se spustí událost vložení!

JavaScript

Prvním krokem je vytvoření funkce, která bude fungovat jako zpětné volání posluchače události. V rámci funkce musí být provedena počáteční kontrola event.animationName, aby se zajistilo, že jde o název animace, který chceme v tomto konkrétním případě poslouchat:

var insertListener = function(event){
	if (event.animationName == "nodeInserted") {
		// This is the debug for knowing our listener worked!
		// event.target is the new node!
		console.warn("Another node has been inserted! ", event, event.target);
	}
}

Pokud název animace odpovídá požadované animaci, víme, že byl vložen uzel DOM. Nyní je čas přidat posluchač události k nadřazenému:

document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

Jak úžasně jednoduché to je?!

Daniel vytvořil toto řešení, aby pomohl v jeho nadcházející iniciativě webových komponent, iniciativě, které se brzy budu věnovat podrobněji. Tento hack vkládání uzlů je užitečný a nepoužívá žádný rámec, takže je to neuvěřitelný mechanismus, který může použít každý. Dobrá práce Danielovi!