CSS动画，可以添加类，但不能删除类 [英] CSS Animation, working adding class, but not removing the class

问题描述

我有这个关键帧

@keyframes jump {
  25% {
    transform: translate3d(0, 0px, 0);
  }
  75% {
    transform: translate3d(0, 10em, 0);
  }
  100% {
    transform: translate3d(0, 17.5em, 0);
  }
}

然后我有这个课程

.close.form_open {
  animation: jump .5s forwards linear;
  -webkit-animation: jump .5s forwards linear;
}

我正在使用jQuery添加form_open类，并在添加该类时动画工作正常，但是当我删除类（使用jQuery）时，它不显示动画。元素将移到正确的位置，但没有任何动画。
我想念什么？
我的课程关闭为空

I'm adding the class form_open with jQuery and when the class is added the animation is working properly, but when I remove the class (with jQuery), it doesn't show the animation. The element goes to the right position, but without any animation. What am I missing? My class close is empty

.close {

}

非常感谢

更新：添加了小提琴
演示

推荐答案

如注释中所述，动画与过渡不同。当移除类（或属性）时，转场会自动产生相反的效果，而动画默认情况下则不会。

As mentioned in comments, animations are not like transitions. Transitions automatically do the reverse effect when the class (or property) is removed whereas animations would not do that by default.

要使其在动画中实现，我们应该创建一个动画的相反效果，并将其添加到每次其他点击上。

To make it happen with animations, we should create a reverse effect of the animation and add it on every alternate click.

$('#show_form').click(function() {
  $('.close').toggleClass('form_open form_close');
});

/************** KEYFRAMES ********************/

@keyframes jump {
  25% {
    transform: translate3d(0, 0px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@-webkit-keyframes jump {
  25% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@-webkit-keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.close.form_open {
  animation: jump .5s forwards linear;
  -webkit-animation: jump .5s forwards linear;
}
.close.form_close {
  animation: jump_close .5s forwards linear;
  -webkit-animation: jump_close .5s forwards linear;
}
.form_open {
  margin-bottom: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-xs-12 espacio">
  <h4 id="show_form">
    Click here
  </h4>
  <div class="form_open">
    <div class="entrada_datos col-md-9 col-xs-7 col-lg-8">
      <form id="modifica_join" action="#" role="form">
        <div class="form-group">
          Some text
        </div>
      </form>
    </div>
  </div>
</div>
<div class="row close form_close">
  Cerrar sesión
</div>

上述代码的一个缺点是默认情况下，它将使反向动画在页面加载时发生，但是可以通过添加基于计数器的检查（请参见下面的代码片段）来克服。

One drawback of the above code is that it would by default make the reverse animation happen on page load but that can be overcome by adding a counter based check (refer below snippet).

var i = 0;
$('#show_form').click(function() {
  if (i == 0) $('.close').addClass('form_open');
  else $('.close').toggleClass('form_open form_close');
  i++;
});

/************** KEYFRAMES ********************/

@keyframes jump {
  25% {
    transform: translate3d(0, 0px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
@-webkit-keyframes jump {
  25% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 20px, 0);
  }
}
@-webkit-keyframes jump_close {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}
.close.form_open {
  animation: jump .5s forwards linear;
  -webkit-animation: jump .5s forwards linear;
}
.close.form_close {
  animation: jump_close .5s forwards linear;
  -webkit-animation: jump_close .5s forwards linear;
}
.form_open {
  margin-bottom: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-xs-12 espacio">
  <h4 id="show_form">
    Click here
  </h4>
  <div class="form_open">
    <div class="entrada_datos col-md-9 col-xs-7 col-lg-8">
      <form id="modifica_join" action="#" role="form">
        <div class="form-group">
          Some text
        </div>
      </form>
    </div>
  </div>
</div>
<div class="row close">
  Cerrar sesión
</div>

这篇关于CSS动画，可以添加类，但不能删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！