Javascript 使用JS addClass制作动画

我想在我的div出现时添加幻灯片动画

我目前正在一个旧的应用程序中重写代码，我正在使用flex以使其具有响应性

问题

我在一行上有三个div，id和内容为：

• 第一个会在单击时做出反应，并在第二个中加载一堆信息
• 当第二个按钮有内容时，它会在点击时做出反应，使第三个按钮出现，而第一个按钮消失
• 第三个是隐藏的，等待第二个被点击触发

我希望所有这些出现和消失有一个平滑的幻灯片动画像以前一样

现有解决方案（无弹性）

创建动画时，第三个div具有绝对显示，幻灯片只是将div从屏幕外部移动到屏幕中。它不适用于响应性应用程序

我的解决方案

在第二个div中单击会将一个类“隐藏”添加到第一个div中，该类在单击的项目和第三个div中处于活动状态

我无法制作动画，有什么线索吗？

请在codepen演示中添加jquery cdn:）

$("span.choose-person").on("click", function () {
  $("#inputEmail").val($(this).attr("mail"));
  $("span.back-theme").show();
  $("#step").show();
  $("#step").addClass("active");

  $("span.choose-person").removeClass("active");
  $(this).addClass("active");

  $("span.choose-person b").remove();
  //setTimeout(function() {
  $("#large").addClass("hide");
  $("#large").hide();
  //}, 500);
});

$("span.back-theme").on("click", function () {
  $("span.back-theme").hide();

  $(".tabs .contact").show();

  $("span.choose-person").removeClass("active").addClass("hide");
  $("#large").removeClass("hide").addClass("active");

  //setTimeout(function(){
  $("#listeMembres").hide();
  $("#step").hide();
  $("#large").show();
  $("span.choose-person b").remove();
  //}, 500); //Same time as animation
});

.hide {
    display: inline-flex;
    max-width: 0;
    transition: all 3s ease;
    will-change: transform;
}

#step .active {
    display: inline-flex;
    max-width: 570px;
    transition: all 3s ease;
    will-change: transform;
}