CODEWITHSUNDEEP
javascripthtmlcssreactjs
Joji
Joji

Reputation: 5625

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. 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.

Suppose I have a button 

<Button
 onClick={() => {
   goBlank();
   }}>
  button
</Button>

I figured that I need to use opacity and transition property. But I couldn't seem to make that happen.

Upvotes: 0

Views: 102

Answers (2)

Paddy
Paddy

Reputation: 625

Use this to click a button and have the page fade out and back in:

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

.page-content {
    transition: opacity 0.5s;
    opacity: 1;
}

.page-content.hide {
    opacity: 0;
    pointer-events:none;
}

Upvotes: 2

David Ko
David Ko

Reputation: 342

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 

blank = () => {
    document.body.style.setProperty("opacity", "0")
    setTimeout(document.body.style.setProperty("opacity", "1"), 1000)
}


<Button onClick={blank}>
  button
</Button>

Upvotes: 1

Related Questions