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, 设置动画时间

原理：

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的其他属性：

className="fade", 指定加入类的前缀

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

CSSTransition

react---css3动画 react-transition-group的使用

猜你喜欢