一：過渡效果

1：效果圖

2：目錄結構（利用官方腳手架進行刪減）

3：index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

4：App.js

import React, { Component ,Fragment} from 'react';
import './style.css';//引入樣式
class App extends Component 
 
{
    constructor(props) {
        super(props);
this.state = {
            show:true,
}
    }

    render() {
        return (
            <Fragment>{/*一個佔位符，只是為了包裹,不渲染*/}
                <div>
                    <h1 className={this.state.show?'show':'hide'}>HELLO</h1>
                </div>
 
                <button onClick={this.handleToggle}>toggle</button>
            </Fragment>
);
}
    handleToggle=()=>{
        this.setState({
            show:this.state.show? false:true,
})
    }
}

export default App;

5: style.css

.show{
    opacity: 1;
transition: all 1s ease-in 
 
;
}
.hide{
    opacity: 0;
transition: all 1s ease-in ;
}

二：動畫效果

1：效果圖

2：style.css（其它檔案保持不變）

.show{
    opacity: 1;
transition: all 1s ease-in ;
}
.hide{
    animation: hide-item 2s ease-in forwards;/*呼叫動畫，forwards作用：使動畫停留在最後的100%*/
}
/*//定義一個動畫*/
@keyframes hide-item {
    0% {opacity: 1;color:red}
    50% {opacity: 0.5;color:blue}
    100% {opacity: 0;color:green}
}