javascript - 为组件的隐藏属性设置动画的最佳方式

Question

我在主题演讲中看到，在即将推出的 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 转换？

Answer 1

我不确定，但我假设 React 属性 isHidden 正在幕后执行 CSS display:none;。您不能在 CSS 中转换显示属性。

因此，如果过渡很重要，我会在加载时使用 CSS opacity:0 隐藏元素，然后在您准备好时添加可见类。