关于 react-transition-group-ie
react-transition-group-ie 是针对 Internet Explorer 浏览器做了优化的 react-transition-group 包。react-transition-group 是一个用于在 React 中管理 CSS 动画的库，它能让你很方便地在 React 组件之间添加动画，并控制它们的生命周期。然而，由于 IE 浏览器对 CSS3 动画支持不完全，react-transition-group 在 IE 上的性能可能无法满足需求。react-transition-group-ie 在动画性能上做了优化，具有更好的兼容性和性能支持。react-transition-group-ie 可以大幅提升 IE 上的动画性能，让你的应用在 IE 上也能获得更流畅的用户体验。
安装和使用
在工程中使用 react-transition-group-ie，你需要先通过 npm 安装它：
npm install react-transition-group-ie
安装完成后，你就可以在你的 React 组件中使用它。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
-- --------- --- --
----- --------- ------- --------------- -
------------------ -
-------------
---------- - - ----- ----- --
-
---------- - -- -- -
------------------- -- -- ----- ----------- ----
--
-------- -
----- - ---- - - -----------
------ -
-----
------- -----------------------------------------
--------------
---------
-------------
------------------
----------- ------------
----------------
------
--
-
-在上面的代码中，我们通过 CSSTransition 组件实现了一个淡入淡出的效果。in 属性控制组件的显示和隐藏，在这里通过 toggleShow 方法修改组件的状态来控制：
toggleShow = () => {
this.setState(state => ({ show: !state.show }));
};timeout 是动画的持续时间，单位为毫秒，这里设置为 300 毫秒。classNames 指定了需要添加的 CSS 类名，在这里指定为 fade。我们需要编写并引入 fade 这个 CSS 类名来控制淡入淡出的动画效果。
在这里我们还需要设置一下 CSS 样式。我们可以增加一个名为 fade-enter 的类来定义进入时的样式，增加一个名为 fade-enter-active 的类来定义进入时的动画，增加一个名为 fade-exit 的类来定义退出时的样式，增加一个名为 fade-exit-active 的类来定义退出时的动画：
-- -------------------- ---- ------- ----------- - -------- -- - ------------------ - -------- -- ----------- ------- ----- -------- - ---------- - -------- -- - ----------------- - -------- -- ----------- ------- ----- -------- -
当我们点击 Toggle 按钮时，show 的状态会发生变化，CSSTransition 组件会根据状态的变化来添加和删除 CSS 类名，从而实现动画效果。
总结
react-transition-group-ie 是一个非常有用的 React 动画库，能够帮助我们在应用中实现各种绚丽的动画效果。在 IE 浏览器上存在性能问题时，安装使用 react-transition-group-ie 可以解决这一问题并提升动画性能，让你的应用在 IE 上也能获得更流畅的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd881e8991b448dd648