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中转换display属性。

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

为组件上的隐藏属性设置动画的最佳方法

1 个答案: