How to use CSS animation to achieve dynamic switching effect?

Question

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;
  }
}

user_18466936 · Answer

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;
}

How to use CSS animation to achieve dynamic switching effect?

1 Answers