Question

在尝试为StackOverflow（specifically here）上的某个人解决问题时，我开始使用CSS事件侦听器进行CSS3过渡。 HTML / CSS很简单，我设置了一个包含3个列表项的div，让CSS通过它们与另一个div一起旋转，以便通过javascript放置新元素。

Here is a link to the code itself

HTML

<div id="list">
    <span class="element">item1</span>
    <span class="element">item2</span>
    <span class="element">item3</span>
</div>

<div id="test">
</div>

CSS

.change {
  overflow: hidden;
  height: 58px;
  color: black;
  font-size: 3em;
}

.change span {
  position: relative;
  display: block;
  animation: myAnim 10s ease infinite 0s;
  -webkit-animation: myAnim 10s ease infinite 0s;
}


@keyframes myAnim {
  0% { top: 0px; }
  20% { top: 0px; }
  35% { top: -58px; }
  55% { top: -58px; }
  70% { top: -116px; }
  90% { top: -116px; }
  100% { top: 0px; }
}

然而，JavaScript会发生一些有趣的事情。我在列表中为animationiteration注册了一个侦听器，并且调用的函数向测试div添加了一个元素。问题是在动画重置为1后，附加到列表的元素将以3个为一组显示！看起来好像该函数已被调用了3次，但它只在每3次调用时呈现给DOM。为什么会这样？

的JavaScript

function listener(e) {
  var list = document.getElementById("list");
  var child = document.createElement('div');
  child.innerHTML = "test";
  document.getElementById("test").appendChild(child);

}

var change = document.getElementById("list");
change.addEventListener("animationiteration", listener, false);
change.className = "change";
console.log(change);

系统信息：

Firefox Version 27.0.1
ArchLinux

请注意，该演示仅适用于Firefox

更新1

我在index.html的第40行（JavaScript所在的位置）放置了一个断点，并且我确认listener确实在所有3个动画之后被调用，并且在该点被调用3次（每次迭代一次）。所以现在的问题是，它为什么会这样？

Answer 1

这是因为#list中有3个跨度，每个跨越动画。尝试添加第四个跨度，将出现4个“测试”消息。根据{{3}}“animationiteration”气泡，所以将监听器附加到父级将会触发与匹配选择器的子级相同的次数

JavaScript事件触发但不更新DOM

1 个答案: