React使用简单动画效果

1.在src目录新建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;

2.src目录新建style.css，放入代码：

.show {
	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;
	}
}

3.index.js引入App.js

import App from './App';