javascript - 使用 jQuery 切换两个 CSS 动画只能通过一次

Question

我正在尝试使用 jQuery 在两个 CSS 动画之间切换，但它们只能工作一次!我怎样才能让它继续切换？此外，由于某种原因，这在 jsFiddle 中似乎根本不起作用。请谢谢。

//hide and show counter-button
$('#counter-button').click(function() {
  $('#counter').toggle();

  //move button down/up on click
  if ($('#counter-button').attr('class') === 'movedown') {
    $('#counter-button').addClass('moveup');

  } else {
    $('#counter-button').addClass('movedown');
  }
});

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}

.movedown {
  animation: down ease forwards 0.5s;
}

@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter-button">
  COUNTER
</div>

<div id="counter"></div>

Answer 1

而不是 .attr('class') === 'movedown' 使用 hasClass() 检查类。在添加 moveup 类时，您应该删除 movedown 类，反之亦然。

检查下面的代码。

//hide and show counter-button
$('#counter-button').click(function() {
  $('#counter').toggle();

  //move button down/up on click
  if ($('#counter-button').hasClass('movedown')) {
    $('#counter-button').addClass('moveup').removeClass('movedown');
  } else {
    $('#counter-button').addClass('movedown').removeClass('moveup');
  }
});

#counter-button {
  font-size: 20px;
  position: fixed;
  right: 90px;
  bottom: 190px;
  z-index: 2;
  cursor: pointer;
}

.movedown {
  animation: down ease forwards 0.5s;
}

@keyframes down {
  from {
    right: 90px;
    bottom: 190px;
  }
  to {
    right: 90px;
    bottom: 100px;
  }
}
.moveup {
  animation: up ease forwards 0.5s;
}
@keyframes up {
  from {
    right: 90px;
    bottom: 100px;
  }
  to {
    right: 90px;
    bottom: 190px;
  }
}
#counter {
  position: fixed;
  height: 80px;
  width: 228px;
  bottom: 100px;
  right: 20px;
  border: 2px solid black;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter-button">
  COUNTER
</div>

<div id="counter"></div>