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的过渡动画效果 */

/* .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:;

　　　　color: red;

　　}

　　50% {

　　　　opacity: 0.5;

　　　　color: green;

　　}

　　100% {

　　　　opacity:;

　　　　color: blue;

　　}

}

@keyframes hide-item {

　　0% {

　　　　opacity:;

　　　　color: red;

　　}

　　50% {

　　　　opacity: 0.5;

　　　　color: green;

　　}

　　100% {

　　　　opacity:;

　　　　color: blue;

　　}

}