react中使用css动画效果

index.js

import React, { Component, Fragment } from 'react';

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;

 

css

/* css的过渡动画效果 */
/* .show{
opacity: 1;
transition: all 1s ease-in;
}
.hide{
opacity: 0;
transition: all 1s ease-in;
} */
/* forwards可以让动画结束保存最后一帧的css样式 */
.show{
　　animation: show-item 2s ease-in forwards;
}
.hide{
　　animation: hide-item 2s ease-in forwards;
}
/*
* css的动画效果
* 通过keyframes定义一些css的动画
*/
@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;
　　}
}