用react的ReactCSSTransitionGroup插件實現(xiàn)簡單的彈幕動畫

1，開始的思路

公司想做直播方面的項目，并想加入彈幕的功能，直播的頁面已經(jīng)作為一個組件放在了用react+redux寫好的一個網(wǎng)站項目上。
所以技術(shù)老大讓我研究下如何用react實現(xiàn)彈幕的功能。下面我就簡單說下我的react彈幕折騰之路。
一開始其實是兩手空空，作為一個php的初級開發(fā)人員，我對前端技術(shù)掌握的很少，遠(yuǎn)不到熟練的程度。所以，我得從頭學(xué)習(xí)如何用js+css實現(xiàn)彈幕，然后再將彈幕移植到react項目上去，這是我一開始的思路。

2，中間的折騰

我百度了下“js 彈幕”，發(fā)現(xiàn)大部分都是用jquery的animate()函數(shù)和css配合來實現(xiàn)的，比如這個HTML+CSS+jQuery實現(xiàn)彈幕技術(shù)，有些則是jquery配合css的animation來實現(xiàn)。
我學(xué)習(xí)了下用jquery的animate()函數(shù)配合css來實現(xiàn)彈幕的方法，然后就嘗試將這個方法引入到react項目中去。但我在這個地方費了好多時間都沒有進(jìn)展，最終我放棄了將jquery引入react的想法。技術(shù)老大提醒我，可以找找react動畫的解決方法。
于是百度、google，在sgemenfault和知乎上有不少問答，給出了三個解決方向：
1，用react官方提供的動畫插件(ReactCSSTransitionGroup)可以實現(xiàn)基本和簡單的動畫
2，引入專業(yè)的第三方的動畫庫
3，用第三方的react動畫插件
第1種方法，簡單、直接，需要對react的動畫插件有所了解，第2種方法需要非常熟悉第三方庫的用法，像我這種前端的半吊子還是算了:)，第3種方法，我也沒考慮。
總之，我選擇了第1種。我大致看了下react官方的tutorial和docs，然后就開始動手了。

3，初現(xiàn)曙光

按照react官網(wǎng)上給的TodoList例子，我寫出了我的第1個react動畫（沒有用到redux），

實現(xiàn)的基本功能就是在一個輸入框中輸入文字，然后enter發(fā)送文字，文字從一個div的右側(cè)走到左側(cè)，最后消失。先把代碼貼出來：