react显示隐藏动画

发布时间：2020-12-15 09:33:58 所属栏目：百科来源：网络整理

导读：通过className的true或者false控制元素显示或者隐藏。 App.js import React,{ Component } from ‘react‘ ;import ‘./App.css‘ class App extends Component { constructor(props) { super(props); this .state = { show: true ,text: ‘隐藏‘ } } rende

通过className的true或者false控制元素显示或者隐藏。

App.js

import React,{ Component } from ‘react‘;
import ‘./App.css‘
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
        show:true,text:‘隐藏‘
     }
  }
  render() { 
    return ( 
      <div>
        <p className={this.state.show?‘show‘:‘hide‘}>文字</p>
        <button onClick={this.toggle}>{this.state.text}</button>
      </div>
     );
  }
  toggle =()=>{
    var show = this.state.show;
    var text = this.state.text;
    if(show){
      show =false
      text = ‘显示‘
    }else{
      show = true 
      text = ‘隐藏‘
    }
    this.setState({
      show:show,text:text
    })
  }
}
 
export default App;

App.css

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!