javascript - 如何使用 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 循环中，如果您在这里看到 undefined variable ，它们是在我的笔中定义的。

因此，如果有人能告诉我我做错了什么，那就太好了。

提前致谢!

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