react---css3動畫 react-transition-group的使用

react中可以通過state狀態值來控制類名，來達到動畫效果

父組件代碼：

import React from 'react';
import SubComponent from "./subComponent"
import "./app.css"
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isShow:true,
        }
    }

    render() {
        console.log("父組件的render方法被調用了")
        return (
            <div className="App">
                <SubComponent className={this.state.isShow?"show":"hide"}></SubComponent>
                <button onClick={this.changeIsShow}>顯示和隱藏動畫效果</button>
            </div>
        )
    }
    changeIsShow=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
}

export default App;

子組件代碼：

import React from "react"
export default class SubComponent extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            className: props.className
        }
    }
    componentWillReceiveProps(nextProps){
        this.state.className=nextProps.className
    }

    render() {
        return (
            <div className={this.state.className}>
                子組件
                {/*<div>{this.props.uid}</div>*/}
                {/*<div>子組件接受父組件props----{this.props.inputValue}</div>*/}
            </div>
        )
    }
}

app.css代碼：

.hide {
    animation: hide-item 5s ease-in forwards;
}

.show {
    animation: show-item 5s ease-in forwards;
}

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

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

但是僅僅通過css來實現動畫，有些復雜動畫不能控制，例如css只能隱藏dom，但是無法移除dom，這就要通過js代碼來實現了

 

使用CSSTransition,裝包，引包：

npm i react-transition-group

import {CSSTransition} from "react-transition-group"

 

cssTransition會自動給包裹的標簽，添加樣式。

cssTransition的屬性：

1.in={true/false},是告訴組件，你里面的元素是要進行出場動畫還是入場動畫。

2.timeout, 設置動畫時間

實際上：CSSTransition並沒有給組件任何動畫效果，只是在一段時間內，給包裹的組件加上三個類，這個三類中，我們可以寫動畫效果。

in屬性的值從false變為true，就會元素加上下面三個類，即執行入場動畫：

fade-enter這個類是入場動畫的第一個瞬間（幀），加入的，動畫即將結束前消失

fade-enter-active 這個類是fade-enter加入后，第二個瞬間加入，一直持續到入場動畫即將執行完成，動畫即將結束前消失

fade-enter-done 入場動畫結束瞬間，加入，之后一直存在

render() {
        return (
            <div className="App">
                <CSSTransition
                    in={this.state.isShow}
                >
                    <div>顯示或隱藏</div>
                </CSSTransition>
                <button onClick={this.changeIsShow}>顯示和隱藏動畫效果</button>
            </div>
        )
    }

CSSTransition只是控制了這三個類加入，要想實現入場動畫，還需設置如下css

.enter {
    opacity: 0;
}
.enter-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}
.enter-done {
    opacity: 1;
}

與入場動畫類似，出場動畫就是分別給元素加入以下三個類

.exit {
    opacity: 1;
}
.exit-active {
    opacity: 0;
    transition: opacity 1s ease-in;
}
.exit-done {
    opacity: 0;
}

 

CssTransition的其他屬性：

classNames="fade", 指定加入類的前綴, 注意是classNames不是className

onEntered={(el)=>{el.style.color}}, 入場動畫開始前的js操作

onEntering

其他參見：https://reactcommunity.org/react-transition-group/css-transition

元素一開始顯示就有動畫效果，就要設置屬性appear

appear={true},那么元素剛開始顯示出來就會,加入appear三個類

同時設置css代碼：

.enter ,.appear{
    opacity: 0;
}
.enter-active,.appear-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}
.enter-done ,.appear-done{
    opacity: 1;
}

 

TransitionGroup用於管理一組數組中的csstransiton

　　　　　　　　　　<TransitionGroup>
                    {this.state.list.map(item=>(
                        <CSSTransition
                            timeout={1000}
                            appear={true}
                        >
                            <div>{item}</div>
                        </CSSTransition>
                    ))}
                </TransitionGroup>