如何使用CSS动画实现动态切换效果？答案

【问题标题】：How to use CSS animation to achieve dynamic switching effect?如何使用CSS动画实现动态切换效果？
【发布时间】：2022-08-21 17:53:58
【问题描述】：

我是一个前端初学者，我现在想制作一个效果！当您点击红卡上的按钮时，让红色向下移动并淡出，而蓝卡则从上方滑下。当你再次点击蓝色按钮时，它变成蓝色并向下移动淡出，红牌从上面滑下来。

但是我只是让红卡下移，当我想点击蓝卡的按钮时没有效果。对不起，我的整个逻辑卡住了，我希望我能在这里寻求你的帮助，提前谢谢你。

我想做的效果类似于下面这个网址 enter link description here

我做了一个截图作为例子

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>

标签： javascript jquery css animation

【解决方案1】：

我为您编写了此代码，希望对您有所帮助，如果您有任何疑问，我很乐意为您提供帮助。

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>

【讨论】：

非常感谢你，你帮了我一个大忙，我非常感激。
通过添加有关代码的作用以及它如何帮助未来读者解决相同问题的更多信息，可以改进您的答案。