12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

一. 过渡动画

　　# index.js

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import App from ‘./app‘;

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

　　# app.js

import React, { Component, Fragment } from ‘react‘;
import ‘./style.css‘;
class app extends Component{
    constructor(props){
        super(props);
        this.state = {
            show : true
        };
        this.DivToggle = this.DivToggle.bind(this);
    }
    DivToggle(){
        console.log(this.state.show)
        this.setState({
            show: this.state.show ? false : true
        })
    }
    render() {
        return (
            <Fragment>
                <div className={this.state.show? ‘show‘: ‘hide‘}>你好啊</div>
                <button onClick={this.DivToggle}>toggle</button>
            </Fragment>
        )
    }
}
export default app;

　　# style.css

.show{
    opacity: 1;
    transition: all 1s ease-in;
}
.hide{
    opacity: 0;
    transition: all 1s ease-in;
}

二.动画效果

　　使用 keyframes 进行渲染 动画

# style.css

.show{
    /* 使用 forwards  css 动画最后一帧 保存 样式*/
    animation: show-item 2s ease-in forwards;
}
.hide{
     /* 使用 forwards  css 动画最后一帧 保存 样式*/
    animation: hide-item 2s ease-in forwards;
}

@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
}

@keyframes show-item {
    0% {
        opacity: 0;
        color: blue;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 1;
        color: red;
    }
}

三. 使用 react-transition-group 实现动画  (github 地址)  (文档)

　　1. 安装 react-transition-group

　　　　yarn add react-transition-group

　　2. 引入 css-transition 

　　　　import { CSSTransition } fron ‘react-transition-group‘