使用React CSS过渡组输入时的交错组件 [英] Staggering components on enter with react css transition group

问题描述

我想给所有在ReactCssTransitionsGroup中渲染但不知道如何处理的孩子添加交错效果.我查看了这个问题，但想尝试使用反应过渡组.如果不可能，那么我将执行与上述链接的问题类似的操作.

I would like to add a stagger effect to all children that get rendered within a ReactCssTransitionsGroup but do not know how to go about it. I looked at this question but would like to try do it using the react transitions group. If it isn't possible then I will do something similar to the above linked question.

我的过渡组件非常简单:

my transition component is quite simple:

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

推荐答案

8 months later，我找到了没有ReactCSSTransitionsGroup的最佳方法. TransitionsGroup组件的维护不当，因此往往会出现一些破坏性的ui错误:

8 months later and I have found the best way to do this, without ReactCSSTransitionsGroup. The TransitionsGroup component is badly maintained and as a result tends to have some disruptive ui bugs:

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

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

仅举几例...

输入反应运动-高性能动画库，可为开发人员提供很多控制权.免费提供 包含 的惊人动画！使用一段时间后，我强烈建议将其作为ReactTransitionGroup的完整替代品.

Enter react-motion - A highly performant animation library that gives the developer a lot of control. Including staggering animations for free! After using it for some time I can highly recommend it as a complete replacement for ReactTransitionGroup.

这篇关于使用React CSS过渡组输入时的交错组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！