reactjs - React Transition Group：TransitionGroup 的目的是什么？

Question

我正在寻找使用React Transition Group库来为我的 React 页面中的一些内容设置动画。根据这些文档，TransitionGroup 组件执行以下操作：

<TransitionGroup> 组件管理列表中的一组过渡组件（和 <CSSTransition>）。与过渡组件一样，<TransitionGroup> 是一个状态机，用于随着时间的推移管理组件的安装和卸载。

考虑下面的例子。当项目被删除或添加到 TodoList 时，<TransitionGroup> 会自动切换 in 属性。

我不太确定这意味着什么或为什么它很重要。

此外，当我修改他们嵌入在文档页面上的示例代码以便 <TransitionGroup> 标记被替换为 <ul> 标记时，一切似乎都工作得很好（我可以通过单击它们来删除待办事项，我可以添加新的待办事项）。

为什么需要 <TransitionGroup> 组件？它有什么作用？ （当我用无序列表替换它时，为什么事情看起来工作得很好？）

标签： reactjsreact-transition-group

Answer 1

React 过渡组与典型的 css 动画相比有一些优势。这些是我想到的一些要点。

1. 它使用绑定来更改组件的类。例如：enter、appear、enter-active、appear-active、exit、exit-active 等都是动画类的一部分。这使得它在丰富的动画方面真正具有交互性，否则您将无法实现。

2. 一旦动画完成，它具有使用 javascript卸载组件的优点。所以基本上你的前端没有额外的负载。

3. 它使您可以自由定义您喜欢的动画。css 类或在 js 文件中定义自己的样式。

4. 它为您提供各种类型的动画选项。例如：切换转换、转换组、CssTransitions 等。

我建议继续尝试典型的 css 动画并对过渡组做出反应并得出自己的结论。