使用JavaScript和CSS动画检测DOM节点插入

I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API. This hack uses JavaScript, as you would expect, but another technology you wouldn't expect: CSS animations. Let me prove to you that it works!

我与Mozilla的开发人员合作，其中包括Daniel Buchner的开发人员。 Daniel与我分享了一种很棒的策略，用于检测何时将节点注入到父节点中而不使用不推荐使用的DOM Events API 。 正如您所期望的那样，该hack使用JavaScript，但是您不期望使用另一种技术：CSS动画。 让我向您证明它有效！

View Demo 观看演示

HTML (The HTML)

All that's required is a parent element with which we'd like to listen to node insertions within:

所需要的只是一个父元素，我们希望借助它来侦听节点内的插入：

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

You can use any selector helper you'd like, but I've chosen an ID here.

您可以使用任何想要的选择器帮助器，但是我在这里选择了一个ID。

CSS (The CSS)

In order to get a handle on node insertion detection, we need to set up a series of keyframe animations which will start when the node is inserted. The clip property is used since it has no effect on the node itself:

为了获得对节点插入检测的控制，我们需要设置一系列关键帧动画，这些动画将在插入节点时开始。 使用clip属性是因为它对节点本身没有影响：

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

With the keyframes created, the animation needs to be applied on the elements you'd like to listen for. Note the tiny duration; that relaxes the animation footprint on the browser.

创建关键帧后，需要将动画应用到您想听的元素上。 注意微小的持续时间； 可以放宽浏览器上的动画足迹。

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

Add the animation to the child nodes you are listening for. When the animation ends, the insertion event will fire!

将动画添加到您正在侦听的子节点。 动画结束时，将触发插入事件！

JavaScript (The JavaScript)

The first step is creating an function which will act as the event listener callback. Within the function, an initial event.animationName check must be made to ensure it's the animation name we want to listen for in this specific case:

第一步是创建一个将用作事件侦听器回调的函数。 在此函数中，必须进行初始event.animationName检查，以确保在此特定情况下它是我们要收听的动画名称：

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); } }

If the animation name matches the desired animation, we know a DOM node has been injected. Now it's time to add the event listener to the parent:

如果动画名称与所需动画匹配，则表明已插入DOM节点。 现在是时候将事件侦听器添加到父级了：

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

How awesomely simple is that?!

这有多简单？

View Demo 观看演示

Daniel created this solution to aid in his forthcoming web components initiative, an initiative I'll be covering more in depth very soon. This node insertion hack is useful and uses no framework, so it's an incredible mechanism that can be used by anyone. Well done to Daniel!

丹尼尔(Daniel)创建了此解决方案，以帮助他即将推出的Web组件计划，该计划将很快涉及到。 该节点插入技巧非常有用，并且不使用任何框架，因此这是任何人都可以使用的令人难以置信的机制。 丹尼尔做得好！

翻译自: https://davidwalsh.name/detect-node-insertion