React CSS关键帧-当状态从DOM中移除组件时进行动画处理

Question

我很难在React中使用CSS Keyframes。

当组件被挂载时，我可以让它们工作，但当组件被卸载时，在状态将其从DOM中删除之前，CSS转换没有机会动画化。

我并不热衷于用JS库来做这件事，因为我觉得应该有一种方法可以用好的旧CSS来做。

我有一个代码笔，我把它放在一起，以展示我到目前为止所拥有的。https://codesandbox.io/s/react-hooks-usestate-forked-dhvu7?file=/src/styles.css

在动画结束时，我希望组件被卸载，我不希望它留在dom中。

提前谢谢。

Answer 1

您可以使用css关键帧并使用onAnimationEnd事件处理程序在动画完成后触发状态更改。此外，您还可以将style={{ animationFillMode: "forwards" }}添加到节点中，以在将最后一个关键帧从DOM中删除之前保留其CSS属性。

示例：

{removeDom && (<button
style={{ animationFillMode: "forwards" }}
className="some animation class"
onAnimationEnd={()=>setRemoveDom(true)}
/>)}

Answer 2

对于其他想要解决方案的人来说，这篇文章让我达到了我想要的目标https://czaplinski.io/blog/super-easy-animation-with-react-hooks/