javascript - jQuery - 2 つのボタンのアクティブ状態を切り替える

Question

ボタンbodymovinの1つにopen状態があり、もう1つのボタンがクリックされた場合、openボタンがclosedになり、アニメーションが再びクリックされたかのように再び実行され、閉じた状態をシミュレートします。 .

たとえば、 をクリックする#boxと、状態を受け取りますopen(アニメーションが実行されて開きます。クリックすると#slider、状態#boxが失われopen、アニメーションが に戻りclosedます。

同じ状況がスライダーにも同様に適用されます。

var animData1 = {
  container: document.getElementById("box"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "https://cdn.statically.io/gist/moofawsaw/b8abeafe008f8b9ef040199c60a15162/raw/296dde84544ed1b41d5acfa303cca21c3ceee70f/lottie_box.json"
};
var animData2 = {
  container: document.getElementById("slider"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "https://assets6.lottiefiles.com/private_files/lf30_ht7mmN.json"
};
var anim1;
var anim2;

anim1 = bodymovin.loadAnimation(animData1);
anim2 = bodymovin.loadAnimation(animData2);

$("#box").on("click", function() {
  anim1.setSpeed(5);
  //for Box
  if ($("#box").hasClass("active")) {
    anim1.playSegments([100, 0], true);
    $("#box").removeClass("active");
    $(this).find(".state").html("closed");
  } else {
    $(this).find(".state").html("open");
    anim1.playSegments([0, 100], true);
    $("#box").addClass("active");
  }
  //For other button
  if ($("#slider").hasClass("active")) {}
});
$("#slider").on("click", function() {
  anim2.setSpeed(16);
  //for Slider
  if ($("#slider").hasClass("active")) {
    anim2.playSegments([100, 0], true);
    $("#slider").removeClass("active");
    $(this).find(".state").html("closed");
  } else {
    $(this).find(".state").html("open");
    anim2.playSegments([0, 100], true);
    $("#slider").addClass("active");
  }
  //For other button
  if ($("#box").hasClass("active")) {}
});

#box,
#slider {
  display: flex;
  color: white;
  align-items: center;
  cursor: pointer;
  height: 46px;
  max-width: 270px;
  min-width: 270px;
  margin-top: 9px;
  margin-right: 0.5rem;
  margin-bottom: 6px;
  border-style: none;
  border-radius: 6px;
  background-color: #4aabf0;
  font-size: 16px;
}

#slider {
  background-color: #756fe4;
}

#box path,
#slider path {
  fill: white;
  stroke: white;
}

#slider path {
  stroke-width: 0;
}

#box svg {
  min-height: 32px;
  max-height: 32px;
}

#slider svg {
  max-height: 26px;
}

#box svg,
#slider svg {
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}

#box.active>svg {
  transform: scale(.3);
  transform-origin: center;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}

.container {
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.state {
  width: 90px;
  margin-left: .9rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js" integrity="sha256-nrcbQ5LezWWswBYK9nZCrIG7075yl2ChXPCkT/1UCt8=" crossorigin="anonymous"></script>
<div class="container">
  <div id="box">
    <div class="state">closed</div>
  </div>
  <div id="slider">
    <div class="state">closed</div>
  </div>
</div>