React动画实现原理

声明： 当前为草稿阶段。

而后有人能够指引下怎么写草稿文章么~

web动画的实现原理

web动画的实现，最终都是须要操做dom。CSS动画，是给相应的dom元素添加动画className ; JS动画，则是经过定时器或其余手段，不断更改dom元素属性值，达到动画的目的。

React动画的实现原理

React要实现动画，究其根本，最终的落地依然是操做dom, 从而达到页面呈现动画的目的。可是由于React与传统的web页面在代码组织、代码逻辑层面有比较大的差别。由React实现的应用，在程序逻辑中，对dom的关心程度，与传统的开发模式相比较，低了好几个层次，固然最好的状态，就是React编写的应用程序中，能够不用直接操做dom,这是最理想的状态。

为了实现这样的一些要求，React官方以及其余一些三方库，接管了对dom的操做，让咱们在开发业务程序中，能够不操做dom，实现交互动画。对咱们业务开发来讲，不须要咱们操做dom，开发体验瞬间提高好几个档次——咱们都知道，操做dom是比较痛苦的事情，要否则jQuery也不会火这么多年。

React官方提供的动画库是react-transition-group(之前分为react-addons-transition-group 和 react-addons-css-transition-group,如今合并成一个库了)，还有一些比较出名的三方动画库如react-motion，react-magic，velocity-react,rc-animate等等。

本文中会选取其中几个动画库，经过对库源代码的学习，看看它们都是怎么管理或操做dom，实现动画的。

ReactTransitionGroup

how: 怎么使用

why:为何这么提供API

how: 怎么实现