用react的ReactCSSTransitionGroup插件实现简单的弹幕动画

1，开始的思路

公司想做直播方面的项目，并想加入弹幕的功能，直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上。
所以技术老大让我研究下如何用react实现弹幕的功能。下面我就简单说下我的react弹幕折腾之路。
一开始其实是两手空空，作为一个php的初级开发人员，我对前端技术掌握的很少，远不到熟练的程度。所以，我得从头学习如何用js+css实现弹幕，然后再将弹幕移植到react项目上去，这是我一开始的思路。

2，中间的折腾

我百度了下“js 弹幕”，发现大部分都是用jquery的animate()函数和css配合来实现的，比如这个HTML+CSS+jQuery实现弹幕技术，有些则是jquery配合css的animation来实现。
我学习了下用jquery的animate()函数配合css来实现弹幕的方法，然后就尝试将这个方法引入到react项目中去。但我在这个地方费了好多时间都没有进展，最终我放弃了将jquery引入react的想法。技术老大提醒我，可以找找react动画的解决方法。
于是百度、google，在sgemenfault和知乎上有不少问答，给出了三个解决方向：
1，用react官方提供的动画插件(ReactCSSTransitionGroup)可以实现基本和简单的动画
2，引入专业的第三方的动画库
3，用第三方的react动画插件
第1种方法，简单、直接，需要对react的动画插件有所了解，第2种方法需要非常熟悉第三方库的用法，像我这种前端的半吊子还是算了:)，第3种方法，我也没考虑。
总之，我选择了第1种。我大致看了下react官方的tutorial和docs，然后就开始动手了。

3，初现曙光

按照react官网上给的TodoList例子，我写出了我的第1个react动画（没有用到redux），

实现的基本功能就是在一个输入框中输入文字，然后enter发送文字，文字从一个div的右侧走到左侧，最后消失。先把代码贴出来：

  1 import React from 'react';
  2 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
  3 
  4 class App extends React.Component {
  5   constructor(props) {
  6     super(props);
  7     this.state = {
  8       word: '',
  9       value: '',
 10       index: 0,
 11       top: 0,
 12     };
 13     this.returnWord = this.returnWord.bind(this);
 14     this.handleChange = this.handleChange.bind(this);
 15     this.handleSubmit = this.handleSubmit.bind(this);
 16   }
 17 
 18   componentDidMount() {
 19     // 监听回车事件
 20     document.onkeydown = (event) => {
 21       if (event.keyCode === 13) {
 22         document.getElementById('sendBullet').click = null;
 23       }
 24     };
 25   }
 26 
 27   handleSubmit(event) {
 28     event.preventDefault();
 29     this.setState({ value: '' });
 30   }
 31 
 32   handleChange(event) {
 33     this.setState({ value: event.target.value });
 34   }
 35 
 36   returnWord() {
 37     const word = this.myTextInput;
 38     const index = this.state.index;
 39     const top = this.state.top;
 40     if (word === this.state.value) {
 41       this.setState({ word, index: index + 1 });
 42     }
 43     if (top <= 435) {
 44       this.setState({ top: top + 75 });
 45     } else if (top > 435) {
 46       this.setState({ top: 0 });
 47     }
 48   }
 49 
 50   render() {
 51     const item = (
 52       <div
 53         className="bullet"
 54         key={this.state.index}
 55         style={{ top: `${this.state.top}px`, color: `#${((1 << 24) * Math.random() | 0).toString(16)}` }}
 56       >
 57         {this.state.word}
 58       </div>
 59     );
 60 
 61     return (
 62       <div>
 63         <form onSubmit={this.handleSubmit}>
 64           <input
 65             type="text"
 66             ref={
 67               (ref) => {
 68                 if (ref !== null && ref.value.trim() !== '') {
 69                   this.myTextInput = ref.value;
 70                 }
 71               }
 72             }
 73             value={this.state.value}
 74             onChange={this.handleChange}
 75           />
 76         <button >this.returnWord}>发送弹幕</button>
 77           <div
 78             style={{
 79               position: 'relative',
 80               width: '1200px',
 81               height: '500px',
 82               margin: 'auto',
 83               background: 'rgba(255, 0, 0, 0.1)',
 84               overflow: 'hidden',
 85             }}
 86           >
 87             <ReactCSSTransitionGroup
 88               transitionName={{
 89                 enter: 'bullet-enter',
 90               }}
 91               transitionEnterTimeout={5000}
 92               transitionLeave={false}
 93             >
 94               {item}
 95             </ReactCSSTransitionGroup>
 96           </div>
 97         </form>
 98       </div>
 99     );
100   }
101 }
102 
103 export default App;