为什么我的 jQuery/CSS 动画只在第一次点击时起作用？

Question

我正在尝试让一个元素在每次单击 link 时淡出然后淡入。我有以下代码，出于某种奇怪的原因，它只适用于第一次点击。演示：http://jsfiddle.net/aueLr8k0/3/

$("body").on('click', 'a', function () {
   $("div").removeClass('fade').addClass('fade');
})

.fade {
    animation: fadeinout .5s;
}

@keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>

Answer 1

$("div").removeClass('fade').addClass('fade'); 将立即执行，并且在功能上你只会得到 fade class

根据您希望应用 classes 的顺序，您可能希望将超时添加到 either/or/both addClass 和 removeClass

这是一个示例，其中 removeClass 调用将立即执行，而 addClass 将在延迟后执行。

$("body").on('click', 'a', function () {
  $("div").addClass('fade')
  setTimeout(function () { $("div").removeClass('fade') }, 1000) // 1000 milliseconds
})

.fade {
    animation: fadeinout 1s;
}

@keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>

Answer 2

您可以收听 animationend 事件并从中删除 class

$("body").on('click', 'a', function () {
   $("div").addClass('fade').one('animationend', function() {
     $(this).removeClass('fade');
   });
})

.fade {
    animation: fadeinout .5s;
}

@keyframes fadeinout {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click this</a><br><br>
<div style="height:200px;width:200px;background:red"></div>

为什么我的 jQuery/CSS 动画只在第一次点击时起作用？

Why does my jQuery/CSS animation only work on first click?

css

jquery

fade

css-animations