6

我想为在 ReactCssTransitionsGroup 中呈现但不知道如何处理的所有子项添加交错效果。我看了这个问题，但想尝试使用反应转换组来做。如果不可能，那么我将做类似于上述链接问题的事情。

我的过渡组件非常简单：

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})
    )
)
4

2 回答 2

6

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 的完全替代品。

于 2016-04-10T21:29:10.657 回答
3

官方的 ReactCSSTransitionsGroup 维护不善，它被拆分为自己的存储库react-transition-group以注入新的活力。

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

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

  • 免责声明，我是 react-css-transition 的创建者
于 2017-02-01T16:21:01.757 回答