JavaScript事件触发但未更新DOM

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

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

的作品，我把一个断点上线40 index.html（其中的JavaScript我确认listener的确在所有3个动画之后被调用，并且在那个点被称为3次（每次迭代一次）。所以现在的问题是，为什么它的行为如此呢？

来源

2014-03-06 retrohacker

：O哟当完整迭代完成后，只有它更新DOM ..奇怪..！ –

我认为animiteration事件捕捉，只要animloop完成像anim是旋转360度，然后它会捕获1完整旋转完成后。定义的关键帧动画是1个周期，所以如果你说无限然后按照每个关键帧1 anim循环完成迭代结束，它将调用回调。 – Neha

@neha，那么它为什么一次添加3个元素就像它被称为3次 – retrohacker

这是因为#list中有3个跨度，每个都获取动画。尝试添加第四个跨度，然后会出现4个“测试”消息。根据Mozilla Developer Network“动画引用”气泡，因此将听众连接到父母将触发无数次，因为有儿童匹配选择器

来源

2014-03-07 01:06:10 user1857711

JavaScript事件触发但未更新DOM

回答

相关问题