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>

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>

Answer 2

您可以使用当前代码来执行此操作，方法是指定初始宽度和最终宽度，然后根据按钮的点击动态设置样式类。请在下面找到代码：

https://codesandbox.io/s/fervent-dawn-32bfl

还请注意，您已将过渡设置为“ 2000s”，即2000秒：-）

注意：Marudhupandiyan在您的原始问题中的评论还提供了动态确定宽度的解决方案，如果您事先不知道宽度，则这是一种更为理想的解决方案。如果需要，您可以将该逻辑集成到我上面提供的代码中。

在React中设置div的动画宽度

2 个答案: