用react的ReactCSSTransitionGroup插件實(shí)現(xiàn)簡(jiǎn)單的彈幕動(dòng)畫

1，開始的思路

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

2，中間的折騰

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

3，初現(xiàn)曙光

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

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