P28:React高级-多DOM动画制作和编写
通过上一节的学习,只能控制一个DOM元素的动画,想控制多个动画react-transition-group
这个动画库也是可以做到的。这节课就带你了解一下多DOM动画控制的方法。
使用TransitionGroup
它就是负责多个DOM元素的动画的,我们还是拿美女这个案例作例子,现在可以添加任何的服务项目,但是都是直接出现的,没有任何动画,现在就给它添加上动画。添加动画,先引入transitionGrop
。
直接打开/src/Meinv.js
的文件,然后在最顶部同时
import {CSSTransition , TransitionGroup} from 'react-transition-group'
引入之后,就可以使用这个组件了,方法是在外层增加<TransitionGroup>
标签。
<ul ref={(ul)=>{this.ul=ul}}> <TransitionGroup> { this.state.list.map((item,index)=>{ return ( <MeinvItem key={index+item} content={item} index={index} deleteItem={this.deleteItem.bind(this)} /> ) }) } </TransitionGroup> </ul>
这个需要放在循环的外边,这样才能形成一个组动画,但是只有这个<TransitonGroup>
是不够的,你还是需要加入<CSSTransition>
,来定义动画。
加入<CSSTranstion>
标签
可以完全仿照上节课的经验,为Meinv
组件,加上具体的动画设置,就可以实现多DOM元素的动画效果了。代码如下:
<ul ref={(ul)=>{this.ul=ul}}> <TransitionGroup> { this.state.list.map((item,index)=>{ return ( <CSSTransition timeout={1000} classNames='boss-text' unmountOnExit appear={true} key={index+item} > <MeinvItem content={item} index={index} deleteItem={this.deleteItem.bind(this)} /> </CSSTransition> ) }) } </TransitionGroup> </ul> <Boss /> </Fragment>
效果如下:
总结
React动画还有很多知识,能做出很多酷炫的效果,完全可以单独分出来一个岗位,我在工作中用的都是比较简单的动画,用react-transition-group
动画已经完全可以满足我的日常开发需求了。如果你想学习更多的React动画知识,可以看看文档或者书。
学完这节,React的基础知识部分就到这里了,接下来开始讲解Rudex
的知识,希望你能跟着码云笔记继续学习,一起努力进步。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P28:React高级-多DOM动画制作和编写
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P28:React高级-多DOM动画制作和编写