（十五）React 中 使用 CSS 动画效果

CSS 动画效果 ：通过 @keyframs 来定义一些 CSS 的动画

image.png

实现代码

App.js

import React, { Component, Fragment } from 'react';
import './style.css'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        }
        this.handleToggole = this.handleToggole.bind(this)
    }
    render() {
        return (
            <Fragment>
                <div className={this.state.show ? 'show' : 'hide'}>
                    hello
                </div>
                <button onClick={this.handleToggole}>toggle</button>
            </Fragment>

        )
    }
    handleToggole() {
        this.setState({
            show: this.state.show ? false : true
        })
    }
}
export default App

style.css

.show {
  opacity: 1;
  animation: show-item 2s ease-in forwards;
}
.hide {
  animation: hide-item 2s ease-in forwards;
}
/* 动画结束之后，保存动画最后一帧的样式 */
@keyframes show-item {
  0% {
    opacity: 0;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: green;
  }
  100% {
    opacity: 1;
    color: blue;
  }
}

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

index.js

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


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