在组件样式ReactJS中更改200ms后的不透明度
在组件样式ReactJS中更改200ms后的不透明度
提问于 2019-01-07 04:33:05
我使用了ReactJS框架，我尝试了一下，这个组件在200ms后将它的样式从opacity 0变成了opacity 1。有可能做这样的setTimeout吗？
<GreetingHeadline styles={?} id={this.props.user.id} />回答 3
Stack Overflow用户
发布于 2019-01-07 05:52:41
这是一个在隐藏/可见类之间使用切换的工作示例。我添加了过渡，以便更容易地看到效果(200ms是一个非常短的时间)，但你可以在你的代码中删除它。
class Test extends React.Component {
constructor() {
super();
this.state = { classes: 'hidden' };
}
componentDidMount() {
setTimeout(() => this.setState({ classes: 'visible' }), 200);
}
render() {
const { classes } = this.state;
return <div className={classes}>Text to be rendered</div>;
}
}
ReactDOM.render(<Test />, document.getElementById('container'));.hidden { opacity: 0; }
.visible { opacity: 1; transition: opacity 1s linear;}<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="container"></div>
Stack Overflow用户
发布于 2019-01-07 04:45:48
您可以将变量设置为GreetingHeadline的父组件的状态：
constructor() {
this.state = {
transparent: true;
}
}然后，您可以在componentDidMount生命周期的方法中使用setTimeout：
componentDidMount() {
this.setTimeout(() => {
this.setState({ transparent: false });
}, 200);
}最后，您可以在GreetingHeadline组件的属性中使用状态变量：
<GreetingHeadline
styles={{ opacity: this.state.transparent ? '0.7' : '1' }}
id={this.props.user.id}
/>Stack Overflow用户
发布于 2019-01-07 05:34:35
设置类是更改不透明度的最简单方法。下面是一个使用动画来“平滑”过渡的示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54065685
复制相关文章
相似问题