设置零部件上隐藏特性动画的最佳方式

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在幕后执行CSSdisplay:none;。无法在CSS中转换display属性。

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