如何在React中一个字母一个字母地动画删除一个段落

Question

我想动画化逐个字母删除HTML段落的一部分，就像按住Delete键一样。可能需要说文本跨越多行。

<p className="paragraph1">
  <span className="keep">Text that should not be deleted.</span>
  <span className="hide">Text that should be deleted.</span>
  <span className="keep">More text that should not be deleted.</span>
</p>

<p className="paragraph2">
  <span className="keep">Text that should not be deleted.</span>
  <span className="keep">More text that should not be deleted.</span>
  <span className="hide">Text that should be deleted.</span>
</p>

Answer 1

如果您使用的是React，则不应访问DOM来显示或修改文本。

const words = ["CSS3.", "HTML5.", "javascript."];

字符串应来自props以获得更实用的方法，或存储在组件的状态中。然后，您可以简单地使用超时来修改状态。

并在段落中显示状态。