Add css transition when onclick in react - css

Question

Hihi, I want to add a transition when the lightbox is set to true and then when it's set to false but I'm now able to reach it.
I was able to add a transition when I hover the image but I can add it this.
Could anyone help me getting this??
import '../assets/scss/gallery.scss';
import { useState, useEffect } from 'react';
// import Gallery from 'react-grid-gallery';
function Images() {
const [imageToShow, setImageToShow] = useState('');
const [showLightbox, setShowlightbox] = useState(false);
const showImage = (image) => {
setImageToShow(image);
setShowlightbox(true);
};
// hide lightbox
const hideLightBox = () => {
setShowlightbox(false);
};
useEffect(() => {
// eslint-disable-next-line no-unused-expressions
showLightbox ? document.body.classList.add('of') : document.body.classList.remove('of');
}, [showLightbox]);
return (
<section>
<div className="container">
<div className="gallery">
<div className="gallery-item" data-category="business">
<button
type="button"
data-lightbox="example-set"
className="lightbox"
onClick={() => showImage('https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg')}
data-title="Click the right half of the image to move forward."
>
<img src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg" alt="gallery-images" className="hover-shadow" />
</button>
</div>
<div className="gallery-item" data-category="business">
<button
data-lightbox="example-set"
type="button"
className="lightbox"
onClick={() => showImage('https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg')}
data-title="Click the right half of the image to move forward."
>
<img src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg" alt="gallery-images" className="hover-shadow" />
</button>
</div>
</div>
</div>
{
showLightbox
? (
<div>
<button type="button" onClick={hideLightBox}>
<div id="lightbox">
<img id="lightbox-img" src={imageToShow} alt="test" />
</div>
</button>
</div>
)
: ''
}
</section>
);
}
export default Images;
#import './common';
.gallery {
display: flex;
justify-content: space-between;
&-item {
#include desktop {
margin: 10px;
transition: all 5s;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
filter: brightness(70%);
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
}
}
transition: all 5s;
}
.lightbox {
&:hover{
cursor: pointer;
}
border: none;
transition: all 5s;
}
#lightbox-img {
height: 50vh;
max-width: 90vw;
object-fit: cover;
transition: all 5s;
}
#lightbox {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
vertical-align: bottom;
transition: all 5s;
}
.of {
overflow: hidden;
height: auto;
} b
I added the transition:all 5s to almost everyone to see if I get it that way but I didn't have luck :(