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: 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;
　　}
}

react中使用css動畫效果