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
的知识,希望你能跟着码云笔记继续学习,一起努力进步。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P28:React高级-多DOM动画制作和编写
码云笔记 » P28:React高级-多DOM动画制作和编写