Hide React micro animations on component using display:none

Question

Hide React micro animations on component using display:none

Is there a way to make this component appear on button click with a smooth ease-in expand or popout animation? I'd like the transition to be smoother rather than it just appearing suddenly.

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card style={{ display: show && "none" }}>This is my card</Card>
    </div>
  );
};

https://codesandbox.io/s/lucid-star-fs6zi?fontsize=14&hidenavigation=1&theme=dark

javascript css reactjs css-animations css-transitions

Answer 1

Answer №1

If you want to achieve a smoother transition effect, consider using the opacity property instead of changing the display value. Here's an example implementation with the transition attribute for added animation:

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  const cardStyle = {
    opacity: show ? 0 : 1,
    transition: "all 1s ease-in"
  };

  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card style={cardStyle}>This is my card</Card>
    </div>
  );
};

https://codesandbox.io/s/confident-morse-phg31?fontsize=14&hidenavigation=1&theme=dark

Answer 2

If you want to achieve a smoother transition effect, consider using the opacity property instead of changing the display value. Here's an example implementation with the transition attribute for added animation:

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  const cardStyle = {
    opacity: show ? 0 : 1,
    transition: "all 1s ease-in"
  };

  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card style={cardStyle}>This is my card</Card>
    </div>
  );
};

https://codesandbox.io/s/confident-morse-phg31?fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

While the previous solution works well, I have come up with an alternative method using CSS rather than inline styles. By conditionally applying a className and managing the transition in a separate CSS file, you can achieve the desired effect. The link to the sandbox showcasing this approach is provided below.

import './CardExample.css';

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <div className='card-example'>
      <button onClick={handleClick} type="primary">
        Show Card
      </button>
      <Card className={show ? 'showing' : 'not-showing'}>
          This is my card
      </Card>
    </div> 
  );
};

In the CSS file, you can include the following code to conditionally adjust the visibility attribute with a smooth one-second animation interval.

.not-showing {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 0.5s linear;
}
.showing {
  visibility: visible;
  transition: visibility 1s, opacity 0.5s linear;
  opacity: 1;

}

I have set up a sandbox environment for demonstration purposes:

https://codesandbox.io/s/react-hooks-playground-boih3?fontsize=14&hidenavigation=1&theme=dark

Answer 4

While the previous solution works well, I have come up with an alternative method using CSS rather than inline styles. By conditionally applying a className and managing the transition in a separate CSS file, you can achieve the desired effect. The link to the sandbox showcasing this approach is provided below.

import './CardExample.css';

const CardExample = () => {
  const [show, setShow] = useState(false);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <div className='card-example'>
      <button onClick={handleClick} type="primary">
        Show Card
      </button>
      <Card className={show ? 'showing' : 'not-showing'}>
          This is my card
      </Card>
    </div> 
  );
};

In the CSS file, you can include the following code to conditionally adjust the visibility attribute with a smooth one-second animation interval.

.not-showing {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 0.5s linear;
}
.showing {
  visibility: visible;
  transition: visibility 1s, opacity 0.5s linear;
  opacity: 1;

}

I have set up a sandbox environment for demonstration purposes:

https://codesandbox.io/s/react-hooks-playground-boih3?fontsize=14&hidenavigation=1&theme=dark

Hide React micro animations on component using display:none

Answer №1

Answer №2

Similar questions

In production mode, the Angular/JS Express app is stuck in an endless routing loop, while it functions perfectly in development mode

How can I filter an array to retain only the initial 5 characters of every element?

Should I include all components in the app.js file or import them directly into the Vue component?

What is the best way to continuously loop an image from left to right and right to left indefinitely using JavaScript?

Discovering vacation days in the Persian calendar (Shamsi)

CSS - Problem with image display and hover functionality

Suggestions for deleting browser cache programmatically by utilizing JS or HTML

Node-zookeeper-client executes the callback for getData method only one time

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

Pass information from Vue JS v-for to a button when it is clicked

Troubleshooting issue with the inability to terminate Electron JS child processes

Tips for incorporating external JavaScript code into React components

Executing various tasks during the mongodb update process: utilizing $addToSet, $inc, and performing aggregations such as $subtract

Error message: Redux-toolkit: The store does not contain a valid reducer

What could be causing the "no such file" error to occur while attempting to use the "mammoth" tool to convert a basic .docx file?

Error in Compass Compilation when encountering Unicode Characters

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

Error: Unable to assign the value of 'setState' property to an object that is not defined. React

Navigating through hashed URLs with a Flexslider component

Totally at a standstill. (Problem with MongoDB in my MERN stack)