Question

我想为所有在ReactCssTransitionsGroup中呈现但不知道如何去做的子项添加交错效果。我查看了this问题，但我想尝试使用react过渡组。如果不可能，那么我将做与上述相关问题类似的事情。

我的过渡组件非常简单：

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以吸纳新的生命。

如果您关心平滑动画，即使在低端移动设备上也不像反应动作不是一个好的解决方案，您仍然需要依赖CSS过渡。

你可以尝试react-css-transition，它旨在为你提供React中可靠的CSS过渡。

免责声明，我是react-css-transition的创建者

使用react css过渡组进入交错的组件

2 个答案: