react——react-transition-group的基本使用（一）

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

牟童

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

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/c9316/article/details/108539672

本文介绍了如何在React中使用react-transition-group库，重点讲解了最常用的CSSTransition组件。通过实例展示如何实现淡入淡出效果，帮助开发者了解如何在页面元素切换时添加平滑过渡动画。

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

安装该组件库：yarn add react-transition-group

该组件库包括四个组件：Transition（不太用了） CSSTransition（最常用） SwitchTransition TransitionGroup（列表中元素的动画）

CSSTransition简单案例：

效果：点击按钮，下方的图片以淡出方式隐藏，再次点击按钮，图片淡入

代码：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'antd/dist/antd.css'
import './transition/CSSTransition.css'
// import './transition/SwitchTransition.css'

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

App.js:

import React, { PureComponent } from 'react';
import CSSTransitionDemo from './transition/CSSTransitionDemo.js'

export default class App extends PureComponent {
  render(){
    return (
      <div>
        <CSSTransitionDemo/>
      </div>
    )
  }
}

子组件CSSTransitionDemo:

import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'

import { Card } from 'antd';
const { Meta } = Card;

export default class CSSTransitionDemo extends PureComponent {
    constructor(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    render() {
        const {isShow}=this.state;
        return (
            <div>
                <button onClick={e=>{this.setState({isShow:!isShow})}}>显示/隐藏</button>
                <CSSTransition in={isShow}
                                classNames="card"
                                timeout={400}
                                appear>
                <Card
                    hoverable
                    style={{ width: 240 }}
                    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                >
                    <Meta title="Europe Street beat" description="www.instagram.com" />
                </Card>
                </CSSTransition>
            </div>
        )
    }
}

样式CSSTransition.css：

.card-enter,.card-appear{
    opacity: 0;
    transform:scale(.4);
}
.card-enter-active,.card-appear-active{
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms,transform 300ms;
}
.card-exit{
    opacity: 1;
    transform: scale(1);
}
.card-exit-active{
    opacity: 0;
    transform: scale(.4);
    transition: opacity 300ms,transform 300ms;
}
.card-exit-done{
    opacity: 0;
}