10.React中CSS动画19-04-30

一.React中实现CSS过渡动画

App.js

import React, {Component, Fragment} from 'react';
import './style.css'

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      show:true
    }
    this.handleToggle = this.handleToggle.bind(this);
  }

  render() {
    return (
      <Fragment>
        <div className={this.state.show ? 'show' : 'hide'}>hello</div>
        <button onClick={this.handleToggle}>toggle</button>
      </Fragment>
    )
  }

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

style.css

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

一.React中使用CSS动画

style.css有所改动 App.js不变

.show {
    /*opacity: 1;*/
    /*transition: all 1s ease-in;*/
    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: yellow;
    }
    100%{
        opacity: 1;
        color: greenyellow;
    }
}