Css animation with display none doesnt work

Question

I have a screen that includes a button on the left and a picture on the right and soon as I click the button CLICK, I want the image on the left to display none with animation. Later on, another box which was displayed none before, should display block.

function calculate() {
  document.getElementById('body-mass-image').classList.add('body-mass-over');
  var el = document.getElementById('body-mass-result-box');
  if (el) {
    el.className += el.className ? '__show' : '__show';
  }
}

.calculate__content__result { display: none; }
..calculate__content__result__show { display: block; }

#body-mass-image {
  transition: all 1s linear;
  display: block;
  opacity: 1;
}

#body-mass-image.body-mass-over {
  display: none;
  transition: opacity 1s ease-out;
  opacity: 0;
}

<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
  <div class="form-group">
    <div class="calorie__button__area">
      <button type="submit" class="button-secondary button__calculate" onclick="calculate()">CLICK</button>
    </div>
  </div>
  <div class="col-lg-6 col-md-12 col-sm-12 calculate__content" id="body-mass-image">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBwAo9q5FtWQKO_hKSmgkKkrMZZtirYph9xg&usqp=CAU" alt="Weight Calculation Image"/>
  </div>
  <div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result" id="body-mass-result-box">
    <div class="row">
      <div class="col-lg-2 col-md-12 col-sm-12"></div>
      <div class="col-lg-8 col-md-12 col-sm-12">
        <div class="result__box">
        <div class="title">Vücut Kitle End.:</div>
        <div class="calorie">33.9</div>
        <div class="title">Durum:</div>
        <div class="calorie">Şişman/Obez</div>
      </div>
    </div>
  <div class="col-lg-2 col-md-12 col-sm-12"></div>
  </div>
</div>

So, I display none the image and display block the result__box, but the thing is there i no animation.

Answer 1

If I can understand you clearly, you're trying to make the image disappear slowly using display none on transition which for a very technical reason will never work.

Transition will work perfectly on opacity because opacity has value count down ranging from value 0, 0.1, 0.2, 0.3 till 1.0, so it is possible that within the 1 second you gave, it will translate through those values... But display has no count down, it's either it display or it doesn't

I fear, transition can not work on display, if you want the image to disappear, consider using opacity combine with height and width.

.weight__calculations #body-mass-image {
  transition: all 1s linear;
  width: // the initial width;
  height: //the initial height;
  opacity: 1;
}

.weight__calculations #body-mass-image.body-mass-over {
  transition: opacity 1s ease-out;
   height: 0;
   width: 0;
  opacity: 0;
}

But if you actually need to use display none, then consider using setTimeout in JavaScript to display the image to none after 1 second, by then your your animation has finished with the opacity.

But again, you're trying to make a result_box appear and image to disappear on click with some transition implementation... Transition should not be used at this situation, but you need animation because transition needs action like "hover" before implementing, but animation implements on it's own... You will have to set up an appear and disappear css for both image and result_box:

example

. result_box_appearance{
   opacity: 0;
   height:0;
   width:0;
   animation: 1s linear;
   animation-name: result_box_appearance;
}


@keyframes result_box_appearance{
0%{
   opacity: 0;
   height:0;
   width:0;
}

100%{
   opacity: 1;
   height: 70px;
   width: 90px;
}

}

So when you click the button, you can now assign the second className to the result_box.

result_box.className = "result_box result_box_appearance";

and you will have to do the same to disappear for both result_box and image

Answer 2

Instead of using display block, you can use max-height: 0; and to display it use max-height: 999px if this the height is big enough for you.

const button1 = document.getElementById('show');

button1.addEventListener('click', () => {
  const image = document.getElementById('image');
  const text = document.getElementById('text');
  
  if (image.classList.contains('show')) {
    image.classList.remove('show');
    text.classList.add('show');
    return;
  }
  image.classList.add('show');
  text.classList.remove('show');
});

.block {
  overflow: hidden;
  height: 100px;
  width: 100px;
  transition: 0.3s all ease;
  opacity: 0;
  max-width: 0;
  max-height: 0;
}
.block.show {
  opacity: 1;
  max-width: 100px;
  max-height: 100px;
}
img {
max-width: 100%;
}

<button type="button" id="show">
  toggle
</button>
<div id="image" class="block show">
  <img src="https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" alt="some title" />
</div>

<div id="text" class="block">
  some text
</div>