[英]how should I achieve the effect where when I click on a button, the page go blank for a second in React
I am new to React and css. 我是React和CSS的新手。 I wanted to make a button and when the button is clicked on, the page will go blank for, like 1 sec, then gradually returns to the norm. 我想创建一个按钮,当单击该按钮时,该页面将保持空白,例如1秒钟,然后逐渐恢复正常。
Suppose I have a button 假设我有一个按钮
<Button
onClick={() => {
goBlank();
}}>
button
</Button>
I figured that I need to use opacity
and transition
property. 我认为我需要使用opacity
和transition
属性。 But I couldn't seem to make that happen. 但我似乎无法实现这一目标。
Use this to click a button and have the page fade out and back in: 使用此按钮单击一个按钮,使页面淡出并返回:
Fadeback.js Fadeback.js
import React from 'react';
import './Fadeback.css';
export default class Fadeback extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
goBlank(){
this.setState({ visible: false });
setTimeout(() => this.setState({visible: true}), 1000);
}
render() {
const classes = this.state.visible ? 'page-content' : 'page-content hide';
return(
<div className={classes}>
<button onClick={() => this.goBlank()}>
Go Blank
</button>
<div>Well this is the content</div>
<div>Well this is the content</div>
<div>Well this is the content</div>
<div>Well this is the content</div>
<div>Well this is the content</div>
</div>
);
}
}
Fadeback.css Fadeback.css
.page-content {
transition: opacity 0.5s;
opacity: 1;
}
.page-content.hide {
opacity: 0;
pointer-events:none;
}
this does changes the opacity to 0 and sets it back to 1 a second later, for the gradual effect, you might want to use actual css transitions and achieve this effect by applying classes 这确实将不透明度更改为0,然后将其重新设置为1秒,为达到渐进效果,您可能希望使用实际的CSS过渡并通过应用类来实现此效果
blank = () => {
document.body.style.setProperty("opacity", "0")
setTimeout(document.body.style.setProperty("opacity", "1"), 1000)
}
<Button onClick={blank}>
button
</Button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.