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

安装该组件库：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(
    ,
  document.getElementById('root')
);

App.js:

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

export default class App extends PureComponent {
  render(){
    return (
      

        
      
    )
  }
}

子组件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 (
            

                {this.setState({isShow:!isShow})}}>显示/隐藏
                
                }
                >
                    
                
                
            
        )
    }
}

样式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;
}