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动画制作和编写的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。