为什么在正在执行的嵌套setTimeouts中没有removeAttribute调用

Question

我正在创建一个rolodex类型的动画，并且我使用计时器为3d动画设置一个类并动态设置z-index，以便元素在需要时叠加并叠加在一起。每一秒我都希望底部跨度（divs.children[1]）设置类和样式属性，然后在那一秒之间，我希望底部删除属性和上半部分（{{1开始它的动画。

当我使用下面的代码时，对divs.children[0]，hideTop()和showTop()的每次调用都按预期工作，但每当调用showBottom()时，样式或类都没有属性正在被删除。我也试过使用hideBottom()，但无济于事。我之前使用setAttribute("style", "")也产生了相同的行为。

Codepen。

setInterval(function() { ... }, 1000)

谢谢！

Answer 1

您不应该使用addAttribute / removeAttribute来添加/删除类/样式。 （HTML属性确定HTML的当前状态，但有关当前DOM状态的权威信息位于DOM节点属性中。See this question.）相反，如果您不想使用任何实用程序库，例如{{3使用jQuery属性设置内联样式，使用HTMLElement.style API添加/删除类。

编辑：乍一看，我在您的代码中看到了另外一个错误。您在0.5秒后使用原始变量值安排部分操作，但随后更改了值。在这种情况下，您需要做的是将所需的值作为附加参数传递给setTimeout。

Element.classList它仍然无法正常工作，但您询问的部分似乎已修复。 Here's your codepen, updated with my suggestions.我将代码修改为更透明，但它也无法正常工作，我没有时间对其进行调试。