用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的右侧走到左侧，最后消失。先把代码贴出来：

点击我查看代码 

延伸阅读

• ssh框架 2016-09-30
• 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
• 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
• Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
• 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
• 从栈不平衡问题 理解 calling convention 2017-07-26
• php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
• Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
• 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
• 集合结合数据结构来看看(二) 2017-07-26

学习是年轻人改变自己的最好方式