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

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 >
  <div >
    <input type="button" value="save" >
  </div>
  <div >
    <input type="button" value="recalculate" >
  </div>
</div>

CodePudding user response：

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 >
        <div >

            <div id="card1" >
                <div >

                    <button onclick="card2Show()">Show card2</button>
                </div>
            </div>
            <div id="card2" >
                <div >

                    <button onclick="card1Show()">Show card1</button>
                </div>
            </div>
        </div>
    </div>
</section>