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高级-多DOM动画制作和编写

总结

React动画还有很多知识,能做出很多酷炫的效果,完全可以单独分出来一个岗位,我在工作中用的都是比较简单的动画,用react-transition-group动画已经完全可以满足我的日常开发需求了。如果你想学习更多的React动画知识,可以看看文档或者书。

学完这节,React的基础知识部分就到这里了,接下来开始讲解Rudex的知识,希望你能跟着码云笔记继续学习,一起努力进步。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P28:React高级-多DOM动画制作和编写

发表评论

提供最优质的资源集合

立即查看 了解详情