如何在引导程序 4 中切换折叠图标的动画?

Question

我正在为Bootstrap 4中折叠的导航栏使用自定义字体真棒图标，我正在尝试使其在单击时旋转。我设法在第一次点击时做到了这一点，但在那之后，无论我点击多少次，动画都不会触发。

以下是导航栏部分的 HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button id="toggler-btn" class="navbar-toggler btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span id="clpse-icon" class="fa fa-arrow-down"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-default btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

这些是CSS动画：

.fa-arrow-down-animated {
animation-name: collapse-icon-animation;
animation-duration: 0.15s;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.fa-arrow-up-animated {
animation-name: collapse-icon-animation-reverse;
animation-duration: 0.25s;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes collapse-icon-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes collapse-icon-animation-reverse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

最后这是我正在使用的jQuery代码：

$(document).ready(function () {
$('#toggler-btn').on('click', function(){
if($('#toggler-btn').attr('aria-expanded')){
$('#clpse-icon').removeClass("fa-arrow-up-animated").addClass("fa-arrow-down-animated");
}
else{
$('#clpse-icon').removeClass("fa-arrow-down-animated").addClass("fa-arrow-up-animated");
}
});
});

我仍然是初学者，所以我希望你能尽可能详细地解释为什么这不起作用。当我检查图标时，我可以看到第一次单击后没有添加/删除类，即使每次单击时 jquery 代码都应激活。 如果这是一个重复的问题，请提前道歉，但我一直在寻找类似的问题，但没有找到。

Answer 1

您可以改用toggleClass()。只需添加到类span id="clpse-icon"：fa-arrow-down-animated，这样它就会：

<span id="clpse-icon" class="fa fa-arrow-down fa-arrow-down-animated"></span>

您的JS可以是这样的：

$(document).ready(function () {
$('#toggler-btn').on('click', function(){  
$('#clpse-icon').toggleClass( "fa-arrow-up-animated" );
});
});

片段：

$(document).ready(function () {
$('#toggler-btn').on('click', function(){  
$('#clpse-icon').toggleClass( "fa-arrow-up-animated" );
});
});

.fa-arrow-down-animated {
animation-name: collapse-icon-animation;
animation-duration: 0.15s;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.fa-arrow-up-animated {
animation-name: collapse-icon-animation-reverse;
animation-duration: 0.25s;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes collapse-icon-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes collapse-icon-animation-reverse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button id="toggler-btn" class="navbar-toggler btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span id="clpse-icon" class="fa fa-arrow-down fa-arrow-down-animated"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-default btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

您可以从此处了解toggleClass。享受代码！