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: 怎麼實現