react切換隱藏或顯示狀態(包含過渡動畫)

App.js

import React, { Component } from 'react';
import './style.css'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      condition:true // 狀態（隱藏或顯示）
     }
  }
  // 切換隱藏或顯示狀態
  toggle=()=>{
    this.setState(()=>({
      condition:this.state.condition?false:true
    }))
   
  }
  render() { 
    return ( 
      <div>
        {/* 根據狀態決定顯示或隱藏的類名 */}
        <div className={this.state.condition?'show' :'hide'}>hello</div>
        <button onClick={this.toggle}>切換</button>
      </div>
     );
  }
}
 
export default App;

css

.show {
  opacity: 1;
  transition: all 1s;
}

.hide {
  opacity: 0;
  transition: all 1s;
}