jquery - 上的第二个 CSS 动画不适用于 jQuery toggleClass 方法

Question

我有一个 div 我想在两个不同的实例中设置动画:单击时，我希望它沿 flex 路径移动并保持在其最终位置，然后如果再次单击我希望它回到原来的位置但是遵循相同的 flex 路径。动画的第一部分效果很好，但我无法应用第二个动画。

CSS:

.dot
{
  position: absolute;
  top: 85%;
  left: 80%;
  color: #000000;
}

.dot-up
{
  animation: yAxisUp 1s ease-out;
  animation-fill-mode: forwards;
}

.container
{
  width: 100%;
  height: 100%;
}

.container-up
{
  animation: xAxisUp 1s ease-in;
  animation-fill-mode: forwards;
}

.dot-down
{
  animation: yAxis 1s ease-out;
  animation-fill-mode: forwards;
}

.container-down
{
  animation: xAxis 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes xAxisUp
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(-200px);
  }
}

@keyframes yAxisUp
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(-150px);
  }
}

@keyframes xAxisDown
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(200px);
  }
}

@keyframes yAxisDown
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(150px);
  }
}

jQuery:

$(".dot").click(function()
{
  $(".dot").toggleClass("dot-up");
  $(".container").toggleClass("container-up");
});

$(".dot-up").click(function()
{
  $(".dot-up").toggleClass("dot-down");
  $(".container-up").toggleClass("container-down");
});

感谢您的帮助!

Answer 1

1st: 正如我指出的，您需要在 toggleClass() 之前使用点号

第二:使用两个点击事件我认为不是最好的方式

我认为你需要做这样的事情

$(".dot").click(function(){
  $(this).toggleClass("dot-up dot-down");
  $(".container").toggleClass("container-up container-down");
});

.dot
{
  position: absolute;
  top: 85%;
  left: 80%;
  color: #000000;
}

.dot-up
{
  animation: yAxisUp 1s ease-out;
  animation-fill-mode: forwards;
}

.container
{
  width: 100%;
  height: 100%;
}

.container-up
{
  animation: xAxisUp 1s ease-in;
  animation-fill-mode: forwards;
}

.dot-down
{
  animation: yAxis 1s ease-out;
  animation-fill-mode: forwards;
}

.container-down
{
  animation: xAxis 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes xAxisUp
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(-200px);
  }
}

@keyframes yAxisUp
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(-150px);
  }
}

@keyframes xAxisDown
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(200px);
  }
}

@keyframes yAxisDown
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(150px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot dot-down">Dot Div</div>
<div class="container container-down">Container</div>

不要忘记在 html 中 <div class="dot dot-down">和 <div class="container container-down">

Additional: then if you need to check for appended class you can check for it in the .dot click event by if($(this).hasClass('dot-top')){//do stuff }