我有一个相对简单的应用程序，有一个头部和一个主要的内容区域。 主要区域可以显示4种不同类型的组件中的一种，但每次只能显示1个组件。每个组件都需要具有从一个状态到另一个状态的过渡（滑动）的能力。
目前我的主应用程序组件持有状态，以确定应该显示哪个组件。 此主应用程序组件还呈现所有4个顶级组件。 每个4个顶级组件都根据应用程序状态隐藏/显示自身。这是切换不同组件的最佳方法，还是应该手动安装和卸载每个组件？ 如果采用安装/卸载方法，是否仍然能够轻松过渡每个元素？
简单的React.js实现
3
- Dan Ramos
2个回答
2
我本来想给道格拉斯的回答点赞或者评论，但是我没有足够的声望！
ReactCSSTransitionGroup可以实现你想要的效果。采用教程中的例子并根据你的需求进行调整，不要忘记先编写动画样式（ReactCSSTransitionGroup依赖于CSS动画结束回调函数来判断元素何时离开/进入dom）。它会为您添加帮助类，以便您可以在（传入和传出的）元素之间创建过渡效果。
ReactCSSTransitionGroup可以实现你想要的效果。采用教程中的例子并根据你的需求进行调整，不要忘记先编写动画样式（ReactCSSTransitionGroup依赖于CSS动画结束回调函数来判断元素何时离开/进入dom）。它会为您添加帮助类，以便您可以在（传入和传出的）元素之间创建过渡效果。
- Anthony Cregan
2
如果你能添加一些示例，那么你的回答会比之前发布的更具信息量和描述性，我可能会点赞你的回答。 - benka
我确实链接了教程，但我唯一在实际应用中实现过这个功能的时间是在一个内部应用程序上（显然我不能分享）。这是我在学习React时制作的测试页面链接。菜单淡入淡出效果使用ReactCSSTransitionGroup来实现简单的不透明度过渡效果，当列表项添加到DOM时：
http://framework.anthonycregan.co.uk/
希望这对你有所帮助。（现在关于那个点赞的问题...） - Anthony Cregan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接