使用CSS3制作简单的React的动画效果

React上仅使用CSS3实现简单的动画效果，以下demo实现的是简单的文字展现和消失动画

1、展现效果的React模版和简单的JS代码，主要是通过state.show的bool值控制hello的展现和消失

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}>toggole</button>
			</Fragment>
		)
	}

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

export default App

2、style.css代码

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

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

3、实现效果

4、可以再增加点更复杂的特效，修改style.css，增加keyframes，优化下变化流程

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

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

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

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

5、效果如下