我使用了ReactJS框架,我尝试了一下,这个组件在200ms后将它的样式从opacity 0
变成了opacity 1
。有可能做这样的setTimeout吗?
<GreetingHeadline styles={?} id={this.props.user.id} />
发布于 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>
发布于 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}
/>
发布于 2019-01-07 05:34:35
设置类是更改不透明度的最简单方法。下面是一个使用动画来“平滑”过渡的示例。
https://stackoverflow.com/questions/54065685
复制相似问题