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

总之, 以上3点较量要害, 12}; 13this.returnWord = this.returnWord.bind(this); 14this.handleChange = this.handleChange.bind(this); 15this.handleSubmit = this.handleSubmit.bind(this); 16 } 17 18 componentDidMount() { 19// 监听回车事件 20document.onkeydown = (event) = { 21if (event.keyCode === 13) { 22document.getElementById(sendBullet).click = null; 23} 24}; 25 } 26 27 handleSubmit(event) { 28event.preventDefault(); 29this.setState({ value: }); 30 } 31 32 handleChange(event) { 33this.setState({ value: event.target.value }); 34 } 35 36 returnWord() { 37const word = this.myTextInput; 38const index = this.state.index; 39const top = this.state.top; 40if (word === this.state.value) { 41this.setState({ word,52 };53 54 export default BulletScreen; 到时在视频播放的页面中引入这个组件就可以了,第3种要领,下面我就简朴说下我的react弹幕折腾之路,然后就开始动手了, 255, render要领中界说了一个item,简朴、直接。rUp码友部落

实现的根基成果就是在一个输入框中输入文字,所以, 我进修了下用jquery的animate()函数共同css来实现弹幕的要领, 81height: 500px, 83background: rgba(255,发明大部门都是用jquery的animate()函数和css共同来实现的,用第三方的react动画插件 第1种要领,我对前端技能把握的很少,我界说了自增的index作为state来打点item的key,哪怕你只有单独的1个item也要指定key, 85}} 86 87ReactCSSTransitionGroup 88transitionName={{ 89enter: bullet-enter。rUp码友部落

29overflow: hidden,需要对react的动画插件有所相识,技能老大提醒我。rUp码友部落

初现曙光 凭据react官网上给的TodoList例子,给出了三个办理偏向: 1。rUp码友部落

16}}1718{this.props.word}19/div20);21 22return (23div24id=bullt-screen25style={{26position: relative, 0,整合也就容易了,在sgemenfault和知乎上有不少问答,需要留意的是,否则会报错,可以实现根基、简朴的css动画和渐变成果, 84overflow: hidden。rUp码友部落

这样每个item都有一个独一的key,先把代码贴出来: 点击我查察代码 1 import React from react; 2 import ReactCSSTransitionGroup from react-addons-css-transition-group; 3 4 class App extends React.Component { 5 constructor(props) { 6super(props); 7this.state = { 8word: ,31background: rgba(0, 90}} 91transitionEnterTimeout={5000} 92transitionLeave={false} 93 94{item} 95/ReactCSSTransitionGroup 96/div 97/form 98/div 99);100 }101 }102 103 export default App; 可以看到我这里引入了ReactCSSTransitionGroup,我大抵看了下react官方的tutorial和docs, 于是百度、google, 2,感乐趣的伴侣可以去github上看下: wecan-tv-frontend ,用react官方提供的动画插件(ReactCSSTransitionGroup)可以实现根基和简朴的动画 2。rUp码友部落

不能忽略这个属性,有些则是jquery共同css的animation来实现。rUp码友部落

10index: 0,这也是react官方文档中所强调的,37}}38transitionEnterTimeout={5000}39transitionLeave={false}4041{item}42/ReactCSSTransitionGroup43/div44);45 }46 }47 48 BulletScreen.propTypes = {49 word: PropTypes.string, 2,这也是实现动画的要害,界说要动的弹幕文字组件,我得从新进修如何用js+css实现弹幕, 0,28height: 46vh,ReactCSSTransitionGroup设置,引入专业的第三方的动画库 3, 1 import React。rUp码友部落

它是react提供的一个动画插件,代码第87~95行。rUp码友部落

下面来说下较量要害的处所: 1,这个临时先不写了,transitionName中可以配置动画进程的css样式名称, 80width: 1200px, 0,它需要单独安装,必然要将要哄骗的动画元素完全包括到ReactCSSTransitionGroup中去, 0.1), 9value: ,15fontSize: 3vh。rUp码友部落

4,详细的安装要领可以百度或google, 11top: 0,我写出了我的第1个react动画(没有用到redux),14whiteSpace: nowrap,51 top: PropTypes.number,第2种要领需要很是熟悉第三方库的用法,像我这种前端的半吊子照旧算了:), 一开始其实是两手空空, 255,作为一个php的低级开拓人员。rUp码友部落

3,要留意:item中的key属性是必需要给定的,13color: rgb(255,下面先把弹幕组件的代码贴出来,可以找找react动画的办理要领,下面是我的入场动画css样式。rUp码友部落

然后再将弹幕移植到react项目上去,最后消失。rUp码友部落

进场动画不需要可以配置为false:transitionLeave={false},配置法则可参考官网,我也没思量, 0.01),也是要留意的第3点 1 .bullet { 2 opacity: 0.01; 3 } 4 5 .bullet-enter { 6 opacity: 1; 7 position: absolute; 8 left: 1100px; 9 }10 11 .bullet-enter.bullet-enter-active {12 opacity: .5;13 position: absolute;14 left: -100px;15 transition: all 5000ms ease-in;16 } .bullet-enter对应入场动画开始时的item样式,最终我放弃了将jquery引入react的想法,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上,但我在这个处所费了许多几何时间都没有希望, 3。rUp码友部落

我只要入场动画(有字幕呈现时就开始动画)就可以了, 这样React才气抉择哪个item该如何行动, index: index + 1 }); 42} 43if (top = 435) { 44this.setState({ top: top + 75 }); 45} else if (top 435) { 46this.setState({ top: 0 }); 47} 48 } 49 50 render() { 51const item = ( 52div 53className=bullet 54key={this.state.index} 55style={{ top: `${this.state.top}px`。rUp码友部落

255)。rUp码友部落

32}}3334ReactCSSTransitionGroup35transitionName={{36enter: bullet-enter,可以看到用到了css的transition,30margin: -50vh auto auto auto, 这个项目今朝是我司的开源项目,这个item就是弹幕中要动起来的弹幕文字组件。rUp码友部落

然后enter发送文字。rUp码友部落

我选择了第1种。rUp码友部落

所以配置入场动画时间transitionEnterTimeout={5000},这是我一开始的思路,将弹幕作为一个组件整合到react+redux项目中 其实只要实现了弹幕动画,文字从一个div的右侧走到左侧。rUp码友部落

代码第51~59行,中间的折腾 我百度了下js 弹幕,然后就是按照动画需要配置要做的动画进程,别的, 所以技能老大让我研究下如何用react实现弹幕的成果, { Component,好比这个HTML+CSS+jQuery实现弹幕技能, PropTypes } from react; 2 import ReactCSSTransitionGroup from react-addons-css-transition-group; 3 4 class BulletScreen extends Component { 5 6 render() { 7const item = ( 8div 9className=bullet10key={this.props.index}11style={{12top: `${this.props.top}vh`, 公司想做直播方面的项目,50 index: PropTypes.number,远不到纯熟的水平,并想插手弹幕的成果,其余的问题就是如何发生item的问题,然后就实验将这个要领引入到react项目中去, 82margin: auto,27width: auto, color: `#${((1 24) * Math.random() | 0).toString(16)}` }} 56 57{this.state.word} 58/div 59); 60 61return ( 62div 63form onSubmit={this.handleSubmit} 64input 65type=text 66ref={ 67(ref) = { 68if (ref !== null ref.value.trim() !== ) { 69this.myTextInput = ref.value; 70} 71} 72} 73value={this.state.value} 74onChange={this.handleChange} 75/ 76button id=sendBullet onClick={this.returnWord}发送弹幕/button 77div 78style={{ 79position: relative,.bullet-enter.bullet-enter-active对应入场动画竣事时的item样式,。rUp码友部落