ReactTransitionGroup 工具的使用代码直接上，理论不说了

最新推荐文章于 2024-04-03 09:45:00 发布

IT有钱人

最新推荐文章于 2024-04-03 09:45:00 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/u013040887/article/details/84862516

React 专栏收录该内容

27 篇文章

订阅专栏

本文深入解析React中使用React Transition Group实现的过渡动画效果，详细介绍了如何通过CSS定义进入和离开的动画，包括transform属性的使用，以及动画持续时间的设置。

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

test.jsx

import ReactTransitionGroup from 'react-addons-css-transition-group';

.... 

<div className="helpModal" >
        <ReactTransitionGroup transitionName="modal" transitionEnterTimeout={400} 
                  <div className='container'>
                  </div>
         </ReactTransitionGroup>
</div>

scss.scss


.helpModal{
        .modal-enter {
            transform: translate(0,100%);
        }
      
        .modal-enter.modal-enter-active {
            transform: translate(0,0);
            transition: transform 400ms ease-in;
        }
      
        .modal-leave {
            transform: translate(0,100%);
        }
      
        .modal-leave .modal-leave-active {
            transform: translate(0,100%);
            transition: transform 400ms ease-in;
        }
      
}

.helpModal{
    .container{
      position: absolute;
      z-index: 10003;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
     
      transition: transform 0.4s;
    }
  }

说明：

transitionName ：样式名称

transitionEnterTimeout ：进入动画的持续时间

transitionLeaveTimeout：离开动画的持续时间