JavaScript反向动画无法正常工作

Question

我想实现的目标: 启动一个动画，需要时立即反向播放。 反向播放可以从循环中的任何位置启动。 我正在对 div 中的文本的每个字符进行单独的动画处理（每个字母在其自己的 span (c) 中）。

我的问题: 看来我低估了我的概念。 我无法使反向播放像我希望的那样起作用。 它确实反转了，但仅在某些不需要的条件下：它必须在增量循环结束之前（索引11）进行反转。 将反向函数调用的超时设置为2000，然后尝试使用3000。 反向工作于前者但不是后者。

我尝试过: 我 console.logged 许多内容以确保一切功能正常。 不幸的是，我出现了错误： Uncaught TypeError: Cannot read property 'style' of undefined. 此错误在我的反向应该启动时立即触发。 当然，这对我来说是没有意义的，因为我的 dom 元素应该已定义，无论是递增还是递减索引“i”，定义都应被保留。 除此之外，我一直在尝试各种结构性变化，希望有所改进。

---

Jsfiddle 演示: http://jsfiddle.net/9cm3Lwem/6/

---

请查找以下代码：

setTimeout(function() {
    text.reverse();
   }, 3000)

尝试使用2000（在动画期间反转）和3000（让动画完成后反转），并观察变化。

我的问题：为什么我的反转没有正确工作，我应该如何优雅地解决这个问题？

- Asperger

---

看起来你已经外包了对于理解你的问题至关重要的数据。请在问题本身中发布所有相关的代码、图片和资源，如果链接失效或更改，你的问题将失去大部分甚至全部的意义！ - Kyll

@Kyll 好的，我会发布代码。我留下它是为了保持简单。 - Asperger

Answer 1

我在 jsFiddle 上查看了你的代码。你的“reverse”函数改变了“state”变量，但它并没有导致“play”函数再次运行。因此，如果你按照你展示的方式在 3000 毫秒后调用 reverse，只有状态变量被改变了。如果计时器没有开启，你需要让 play 函数能够被再次调用。

- Vivian River

---

这并没有解决无效索引问题。 - rlemon