Лучший способ анимировать скрытое свойство компонента - PullRequest
Новая
       11

Лучший способ анимировать скрытое свойство компонента

0 голосов
/ 16 ноября 2018

В заметке я увидел, что в следующих версиях React целесообразно скрыть компонент или элемент со свойством hidden. Однако мне было интересно, как можно добавить эффект к переходу, например, когда переключение видимости элемента.

Вот небольшой пример. Если вы уроните свойство hidden, произойдет переход. 

class App extends React.Component {
  state = {
    isHidden: true
  }
  
  toggle = () => {
    this.setState({
      isHidden: !this.state.isHidden
    });
  }
  
  render() {
    const className = this.state.isHidden ?
      'is-hidden' : 'is-visible';
    return (
      <div>
        <button onClick={this.toggle}>toggle</button>
        <div className={'elm ' + className} hidden={this.state.isHidden}>
          Hello world
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
.elm {
  transition: opacity .5s ease;
}

.is-visible {
  opacity: 1;
}

.is-hidden {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Как я могу использовать свойство hidden и по-прежнему использовать CSS-переходы?

1 Ответ

0 голосов
/ 16 ноября 2018

Не знаю точно, но я предполагаю, что свойство React isHidden делает CSS display:none; за кадром. Вы не можете перевести свойство display в CSS.

Поэтому, если переход важен, я бы скрыл элементы с помощью CSS opacity:0 при загрузке, а затем добавил бы видимый класс, когда вы будете готовы.

...