react实现动画的正确姿势？

Question

目前看到两种方式，
一种是变换CSS，操作DOM，类似过去的方式。
一种是用官方提供的Add-Ons ReactCSSTransitionGroup。

只从运行效率来说，哪种更高，能高多少？

Answer 1

效率没有测试过，你可以自己写写试试，用getTime这样写一个demo测试一下。你的这个问题我先记下，回头我写歌demo测试一下。谢谢邀请
不过根据官网解释说，Add-Ons(附件) ReactCSSTransitionGroup一般用于处理通常不容易实现的动画和转换，例如在组件被移除的时候。

如果是比较简单的话我觉得还是用css transition或着animation. 毕竟人家的这个也是经过封装的，效率上来说肯定没有浏览器认识的css transition或着animation强了。看你需要的动画了，在去参考人家的api看看二者哪个用起来更方便。

Answer 2

谢邀。

我暂时是使用变换CSS在React中实现动画，没有用ReactCSSTransitionGroup，所以没法给你关于运行效率的建议。不过ReactCSSTransitionGroup是按照React的思想来做动画，效率应该不会差到哪去。

据我的接触和研究，ReactCSSTransitionGroup是用React的思想，针对react组件添加了一些钩子，可以让你在组件生命周期的不同阶段进行相应的动画设置，还有个好处就是可以复用。但是ReactCSSTransitionGroup做复杂动画的话还是比较依赖于CSS的。

如果你的动画不是很复杂，并且复用的次数也不多的话，可以用css animation，我就是这种情况。
如果你的动画是比较复杂，在组件的不同阶段都有动画实现，可以用ReactCSSTransitionGroup。

Answer 3

这个问题就像是css和js实现的动画哪个渲染的更快。

我支持js，那么就是ReactCSSTransitionGroup胜出咯，做小型动画，例如旋转变换、移动等，二话不说，css3直接上，几行代码就能搞定。
ReactCSSTransitionGroup应该比较适合用在组件切换的动画效果。运行效率差别真的太小了，又不是做游戏开发，你说是吧，那丁点页面的动画性能完全可以忽略。

Answer 4

用ReactTransitionGroup，不是ReactCSSTransitionGroup，加GSAP/tweenmax