react的css过渡动画、react-transition-group、ransitionGroup的使用方法

最新推荐文章于 2025-06-12 00:17:14 发布

原创最新推荐文章于 2025-06-12 00:17:14 发布 · 744 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#transiton动画 #ransitionGroup动画使用

前端同时被 2 个专栏收录

28 篇文章

订阅专栏

react

25 篇文章

订阅专栏

博客介绍了CSS过渡动画，还讲解了react-transition-group的使用方法，包括安装（npm install react-transition-group），同时提及TransitionGroup使用方法，可参考官方文档获取更多钩子函数和动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css过渡动画

<div className={this.state.show ? 'show' : 'hide'}>hello</div>
.show{
/*opacity: 1;*/
/*transition: all 1s ease-in ; !*所有属性都将获得过渡,ease-in代表动画曲线*!*/
animation: showitem 2s ease-in forwards;/*forwards用来保存最后一个动画一帧，showitem是@keyframes定义的*/
}
.hide{
    /*opacity: 0;*/
    /*transition: all 1s ease-in ;*/
    animation: hideitem 2s ease-in forwards;/*forwards用来保存最后一个动画一帧*/
}

@keyframes hideitem {
     0%{
         opacity: 1;
         color: red;
     }
     50%{
         opacity: 0.5;
         color: green;
     }
     100%{
         opacity: 0;
         color: blue;
     }
 }
@keyframes showitem {
    0%{
        opacity: 0;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100%{
        opacity: 1;
        color: blue;
    }
}

react-transition-group使用方法

安装
npm install react-transition-group
使用方法：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
                    in={this.state.show}
                    timeout={300}
                    classNames="fade" 
                    unmountOnExit //隐藏后不占位置
                    appear={true}  // fade-appear
                    // onEnter={() => setShowButton(false)}
                    // onExited={() => setShowButton(true)}
                >
                    <div>hello</div></CSSTransition>


.fade-enter,.fade-appear{/*执行入场动画时*/
opacity:0;}
/*入场动画没有执行完就一直存在，当入场动画执行完了就不存在了*/
.fade-enter-active,.fade-appear-active{
opacity: 1;
transition:opacity 1s ease-in;
}
/*当整个入场动画完成之后执行*/
.fade-enter-done{
    opacity: 1;
}
.fade-exit{/*执行入场动画时*/
    opacity:1;
}
/*入场动画没有执行完就一直存在，当入场动画执行完了就不存在了*/
.fade-exit-active{
    opacity: 0;
    transition:opacity 1s ease-in;
}
/*当整个入场动画完成之后执行*/
.fade-exit-done{
    opacity: 0;
}

TransitionGroup使用方法

import { CSSTransition,TransitionGroup } from 'react-transition-group';

<TransitionGroup>
                {
                    this.state.list.map((item,index) =>{
                        return(
                            <CSSTransition
                                in={this.state.show}
                                timeout={300}
                                classNames="fade"
                                unmountOnExit
                                appear={true}
                                key={item}
                            >
                            <div>CSSTransition2---item</div>
                            </CSSTransition>
                        )

                    })
                }
                </TransitionGroup>

官方文档：https://reactcommunity.org/react-transition-group/ 有更多的钩子函数以及一些别的动画