React中实现CSS过渡动画及使用动画效果

style.css

.show {
	/*opacity: 1;
	transition: all 0.1s ease-in;*/
	animation: show-item 2s ease-in forwards;
}

.hide {
	/*opacity: 0;
	transition: all 0.1s ease-in;*/
	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;
	}
}

App.js

import React, { Component, Fragment } from 'react'
import style from './style.css'


class App extends Component {
	
	constructor(props){
		super(props);
		this.state = {
			show : tr