reactjs - React中div的动画宽度

Question

我有一个内容发生变化的 div。每当内容发生变化时，div 应该为其宽度设置动画。我尝试了以下方法，但它不起作用。任何指针都会有所帮助。

class App extends React.Component {

 constructor() {
   super();
   this.state = {
     text: 'Hello world'
   }
  }
  
  changeText() {
    this.setState({
      text: 'Very long text stretching across screen'
    });
  }

  render() {
    return <div>
      <div className="text">{this.state.text}</div>
      <button onClick={this.changeText.bind(this)}>Change</button>
      </div>;
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

.text {
display: inline-block;
  background-color: cyan;
  transition: width 2000s;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

标签： reactjscss-animations

Answer 1

我可以这样做：

class App extends React.Component {

 constructor() {
   super();
   this.state = {
     text: 'Hello world'
   }
   this.myRef = React.createRef();
  }
  
  changeText() {
    this.setState({
      text: 'Very long text stretching across screen'
    });
    this.myRef.current.style.width = '250px';
  }

  render() {
    return <div>
      <div ref={this.myRef} className="text">{this.state.text}</div>
      <button onClick={this.changeText.bind(this)}>Change</button>
      </div>;
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

.text {
display: inline-block;
  background-color: cyan;
  overflow: hidden;
  height: 18px;
  width: 80px;
  transition: width 1.5s;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>