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 CSSTransition 实现动画 (github 地址) (文档)

　　1. 安装 react-transition-group

　　　　yarn add react-transition-group

　　2. 引入 css-transition

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

　　3. 将要 改变样式的元素用 CSSTransition 标签包裹起来

　　eg:

　　　　# 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 {CSSTransition} from 'react-transition-group'

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>

<CSSTransition

in={this.state.show}

timeout={1000}

classNames = "fade"

// 当隐藏后 去除挂载

unmountOnExit

// 当显示完成时 颜色变蓝 el 指 CSSTransition 内包裹的元素

onEntered={(el)=>{ el.style.color='red' }}

// 当退出显示时 颜色变黑 el 指 CSSTransition 内包裹的元素

onExited={(el)=>{ el.style.color='black' }}

// 第一次入场动画也要引入动画

appear={true}

>

<div className={this.state.show?'show':'hide'}>hello</div>

</CSSTransition>

<button type="button" onClick={this.DivToggle}>点一下</button>

</Fragment>

);

}

}

export default app;

　　　　#style.css

/* 第一次加载的时候 */

.fade-appear{

opacity: 0;

}

/* 第一次入场的时候后到 第一次完成之前 */

.fade-appear-active{

opacity: 1;

transition: opacity 1s ease-in;

}

/* 入场动画执行的第一个时刻 */

.fade-enter{

opacity: 0;

}

/* 入场动画执行的第二个时刻 到 完成之前 */

.fade-enter-active{

opacity: 1;

transition: opacity 1s ease-in;

}

/* 入场动画执行的完成时刻 */

.fade-enter-done{

opacity: 1;

}

/* 出场动画开始第一个时刻 */

.fade-exit{

opacity: 1;

}

/* 出场动画开始第二个时刻到完成时刻之前 */

.fade-exit-active{

opacity: 0;

transition: opacity 1s ease-in;

}

/* 出场动画的完成时刻 */

.fade-exit-done{

opacity: 0;

}

四. 使用react-transition-group CSSTransition TransitionGroup 实现多个元素样式动画

#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 {CSSTransition, TransitionGroup} from 'react-transition-group'

import './style.css'

class app extends Component

{

constructor(props){

super(props);

this.state={

list : []

}

this.AddItem = this.AddItem.bind(this);

}

AddItem (){

this.setState((prevState)=>{

return {

list : [...prevState.list, 'item']

}

})

}

render(){

return (

<Fragment>

{/* TransitionGroup 包裹住要展示动画的元素 */}

<TransitionGroup>

{

this.state.list.map((val, index)=>{

return (

// 内部要展示样式的元素 使用 CSSTransition 包裹并边写动画效果

// 这时可以删除 in 效果 没有手动点击变换效果

<CSSTransition

timeout={1000}

classNames="fade"

onEntered={(el)=>{el.style.color="red"}}

appear={true}

key={index}

>

<div key={index} >{val}</div>

</CSSTransition>

)

})

}

</TransitionGroup>

<button type="button" onClick={this.AddItem}>点一下</button>

</Fragment>

);

}

}

export default app;

#style.css

/* 第一次加载的时候 */

.fade-appear{

opacity: 0;

}

/* 第一次入场的时候后到 第一次完成之前 */

.fade-appear-active{

opacity: 1;

transition: opacity 1s ease-in;

}

/* 入场动画执行的第一个时刻 */

.fade-enter{

opacity: 0;

}

/* 入场动画执行的第二个时刻 到 完成之前 */

.fade-enter-active{

opacity: 1;

transition: opacity 1s ease-in;

}

/* 入场动画执行的完成时刻 */

.fade-enter-done{

opacity: 1;

}

/* 出场动画开始第一个时刻 */

.fade-exit{

opacity: 1;

}

/* 出场动画开始第二个时刻到完成时刻之前 */

.fade-exit-active{

opacity: 0;

transition: opacity 1s ease-in;

}

/* 出场动画的完成时刻 */

.fade-exit-done{

opacity: 0;

}