react——react-transition-group的基本使用（二）SwitchTransition组件

实现效果：点击按钮，off淡出，紧接着on淡入

实现代码：index.js：

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

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

App.js：

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

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

组件SwitchTransitionDemo.js：

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

export default class SwitchTransitionDemo extends PureComponent {
    constructor(props){
        super(props);
        this.state={
            isOn:true
        }
    }
    render() {
        const {isOn}=this.state;
        return (
            <div>
                <SwitchTransition mode="out-in">
                    <CSSTransition key={isOn?"on":"off"}
                                   classNames="btn"
                                   timeout={1000}>
                        <button onClick={e=>this.setState({isOn:!isOn})}>{isOn?"on":"off"}</button>
                    </CSSTransition>
                </SwitchTransition>
            </div>
        )
    }
}

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