如何使用setTimeout（）动画后​​重新出现元素

Question

我正在制作一个简单的JS程序并且遇到了一些麻烦。你可以在这里查看

http://codepen.io/TheAndersMan/pen/mOGVEy?editors=0010

输入你的名字然后按回车键，它会为你的名字添加动画，但动画后字母会消失，这是可以理解的。我不明白的是为什么我的setTimeout无效并让它们重新出现。

所以这是基本问题：

    var timeOut = (a / 2 + 1) * 1000;
          document.querySelector(".spanWrap").style.width = char.length * 60 + "px";
                  setTimeout(function() {
            thang.style.opacity = "1"
            thang.style.marginTop = "0";
    }, timeOut);

所以希望这是你需要的所有信息，如果没有引用我的笔，这都是for循环，如果你在这里看到未定义的变量，它们就在我的笔中定义。

所以如果有人能告诉我我做错了什么就会很棒。

提前致谢！

Answer 1

您拥有infamous closure bug。

我注意到你正在使用Babel。对于循环本地变量，使用let代替var可以解决问题。请注意，在破坏的CodePen中，最后一个字母保留，而其余字母消失。这是因为你的thang总是等于超时处理程序执行时的最后一个字母（循环很久就结束了）。

请参阅http://codepen.io/anon/pen/ObaVyb。

此外，更好的想法可能是查看animation-fill-mode: forwards，它允许您在动画运行后保留样式。

最后，对于那些不使用ES6的人来说，这段代码将允许您在不创建其他包装函数的情况下实现相同的功能。 （基本上，setTimeout允许您在注册每个处理程序时将参数传递给回调。）

setTimeout(function (thang) {
    thang.style.opacity = "1"
    thang.style.marginTop = "0";
  }, timeOut, thang);

Answer 2

问题是，您在timeouts循环中有多个for，需要引用thang个变量，但是当您的timeouts将被执行时{{1}变量将等于循环中的最后一个thang，因此所有thang都具有相同的引用。希望它清楚。

因此，要解决此问题，您需要逐个将timeout与timeouts变量绑定。

例如，您可以使用闭包来执行此操作：

thangs