How to use CSS animation to achieve dynamic switching effect?

Issue

I'm a front-end beginner and I want to make an effect now! When you click the button on the red card, let the red move down and fade out, while the blue card slides down from above. When you click the blue button again, it turns blue and moves down to fade out, and the red card slides down from above.

But I only make the red card move down, and it has no effect when I want to click the button of the blue card. I'm sorry that my whole logic is stuck, I hope I can ask for your help here, thank you in advance.

The effect I want to do is similar to this URL below enter link description here

I made a screenshot as an example

let btn = document.querySelector('.btn');
let btn2 = document.querySelector('.btn2');


btn.addEventListener('click', function() {
  $('.card1').addClass('active');
})

btn2.addEventListener('click', function() {
  $('.card2').addClass('active');
})

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  position: relative;
}

.wrap .card1 {
  width: 500px;
  height: 300px;
  background-color: red;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.wrap .card1 .btn {
  width: 100px;
  height: 50px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.wrap .card2 {
  position: absolute;
  top: 0px;
  width: 500px;
  height: 300px;
  background-color: blue;
  border-radius: 20px;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.wrap .card2 .btn2 {
  width: 100px;
  height: 50px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.active {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-name: moveup;
  animation-name: moveup;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes moveup {
  from {
    opacity: 1;
  }
  to {
    transform: translatey(20px);
    display: none;
    opacity: 0;
  }
}

@keyframes moveup {
  from {
    opacity: 1;
  }
  to {
    transform: translatey(20px);
    display: none;
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="card1">
    <input type="button" value="save" class="btn">
  </div>
  <div class="card2">
    <input type="button" value="recalculate" class="btn2">
  </div>
</div>

Solution

I made this code for you, hope you find it helpful, if you have any doubt I will be glad to help you out.

function card2Show() {
  var card2 = document.getElementById('card2');
  var card1 = document.getElementById('card1');

  //card1 down transition
  card1.style.transform = "translateY(131px)"; //this move the card down
  card1.style.filter = "opacity(0)"; //this changes the opacity of the card to desapeare it
  //this timeout is set to give time to the first animation to finish
  setTimeout(() => {
    card1.style.display = "none";
    //here is the card2 animation to apear
    card2.style.transform = "translateY(-131px)";
    card2.style.filter = "opacity(0)";
    card2.style.display = "block";
    setTimeout(() => {
      card2.style.filter = "opacity(1)";
      card2.style.transform = "translateY(0)";
    }, 60)
  }, 450)
}

function card1Show() {
  var card2 = document.getElementById('card2');
  var card1 = document.getElementById('card1');

  //card1 down transition
  card2.style.transform = "translateY(-131px)"; //this move the card down
  card2.style.filter = "opacity(0)"; //this changes the opacity of the    card to desapeare it
  //this timeout is set to give time to the first animation to finish
  setTimeout(() => {
    card2.style.display = "none";
    //here is the card2 animation to apear
    card1.style.transform = "translateY(131px)";
    card1.style.filter = "opacity(0)";
    card1.style.display = "block";
    setTimeout(() => {
      card1.style.filter = "opacity(1)";
      card1.style.transform = "translateY(0)";
    }, 60)
  }, 450)
}

.cardsContainer {
  background-color: red;
  max-height: 180px;
  min-height: 180px;
  overflow: hidden;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card1 {
  height: 100px;
  transition: all .6s ease,filter .5s ease;
  padding: 20px;
  background-color:white;
}

.card2 {
  display: none;
  height: 100px;
  padding: 20px;
  background-color:white;
  transition: all .6s ease;
}

<section>
  <div class="col-12 cardsContainer">
    <div class="col-8">
      <div id="card1" class="card card1">
        <div class="card-body">
          <button onclick="card2Show()">Show card2</button>
        </div>
      </div>
      <div id="card2" class="card card2">
        <div class="card-body">
          <button onclick="card1Show()">Show card1</button>
        </div>
      </div>
    </div>
  </div>
</section>

Answered By - Edy