conditional smooth CSS transition

Example Output

JSX code

<div>
    <h3>Person</h3>
    {isOnline &&<p>online</p>}
</div>

Need CSS for this Example Output

Answer

Css: i have a div with display flex which makes img and the span align horizontally, inside my span i have a h1 and a p tag.

for the h1 i have set some css properties and a transformY(10px) that means i am moving it up 10px from its original position.and a transition with time and animation type.

for the p i have also set some properties and a opacityof 0;

then i am just saying if my wrapper has a class of online in it then do this to h1 and p.

i am toggling that online class with a button for demo purpose. but in real life it can be with anything.

let wrapper = document.querySelector(".wrapper");
let btn = document.querySelector(".btn");

btn.addEventListener("click",()=>{
wrapper.classList.toggle("online")
})

.wrapper {
  width: 510px;
  height: 130px;
  background-color: #017d68;
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 30px;
}

img {
  height: 120px;
  border-radius: 100%
}

p {
  font-size: 20px;
  color: white;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  transform: translateY(10px);
  transition: all 0.25s ease-in-out;
}
.wrapper.online h1{
  transform: translateY(-10px);
}
.wrapper.online p {
  opacity: 1;
}

<div class="wrapper">
  <img src="https://images.unsplash.com/photo-1493106819501-66d381c466f1?ixlib=rb-   1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
  alt="">
  <span>
    <h1>Person</h1>
    <p>online</p>
  </span>
</div>
<button class="btn">Change Status</button>