Анимированная ширина div в React - PullRequest
Новая
       12

Анимированная ширина div в React

1 голос
/ 27 июня 2019

У меня есть 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>

Ответы [ 2 ]

2 голосов
/ 27 июня 2019

Я мог бы сделать это так: 

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>
1 голос
/ 27 июня 2019

Вы можете сделать это с вашим текущим кодом, указав начальную и конечную ширину и динамически установив класс стиля на основе нажатия кнопки. Пожалуйста, найдите код ниже:

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

Также обратите вниманиечто вы задали переход как «2000-е», что составляет 2000 секунд: -)

Примечание: комментарий Марудхупандияна в вашем первоначальном вопросе также дает решение, где ширина определяется динамически, что является гораздо более оптимальным решением, еслиВы не знаете ширину заранее.При необходимости вы можете интегрировать эту логику в код, который я предоставил выше.

...