jQuery - 切换两个按钮的活动状态

Question

我有两个带有bodymovin 动画的按钮，我希望它们相互交互，这样如果其中一个按钮具有open 状态并且单击另一个按钮，则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>

Answer 1

你可以这样做：

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);
  anim2.setSpeed(16);
  //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")) {
    anim2.playSegments([100, 0], true);
    $("#slider").removeClass("active");
    $("#slider").find(".state").html("closed");
  }
});
$("#slider").on("click", function() {
  anim1.setSpeed(5);
  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")) {
    anim1.playSegments([100, 0], true);
    $("#box").removeClass("active");
    $("#box").find(".state").html("closed");
  }
});

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

另一种解决方法就是触发对活动项的点击：

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").click();
  }
});
$("#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").click();
  }
});

#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/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>