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>