使用 React css 过渡组进入时交错组件

Question

我想为所有在 ReactCssTransitionsGroup 中呈现但不知道如何去做的 children 添加交错效果。我查看了 this 问题，但想尝试使用反应过渡组来完成。如果不可能，那么我将做类似于上述链接问题的事情。

我的过渡组件非常简单：

Transitions({component: 'div', transitionName: 'stagger'},
    [1, 2, 3, 4, 5].map(i =>
            div({className: 'pure-u-md-1-3 pure-u-lg-1-4 medium-box demo', key: i})
    )
)

Answer 1

8 months later 并且我找到了最好的方法，没有 ReactCSSTransitionsGroup。 TransitionsGroup 组件维护不善，因此往往会出现一些破坏性的 ui 错误：

Components not leaving DOM when switching tabs
Components not leaving DOM when there are a lot of entering/leaving components

仅举几例...

输入 react-motion - 一个高性能的动画库，为开发人员提供了很多控制权。包括惊人的免费动画！使用一段时间后，我强烈推荐它作为 ReactTransitionGroup 的完全替代品。

Answer 2

官方 ReactCSSTransitionsGroup 维护不善，正在拆分到自己的存储库中 react-transition-group 以注入新的活力。

如果您关心即使在低端移动设备上的流畅动画，react-motion 也不是一个好的解决方案，您仍然需要依赖 CSS 过渡。

您可以尝试 react-css-transition，它旨在为您提供 React 中可靠的 CSS 转换。

免责声明，我是 react-css-transition

使用 React css 过渡组进入时交错组件

Staggering components on enter with react css transition group

reactjs

reactcsstransitiongroup