CSS 动画，正在添加 class，但不删除 class

Question

我有这个关键帧

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

那我有这个class

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

我正在添加 class form_open 和 jQuery 并且当添加 class 时动画工作正常，但是当我删除 class（jQuery），它不显示动画。元素移动到正确的位置，但没有任何动画。我错过了什么？我的 class 关闭是空的

.close {

}

非常感谢

更新： 添加了 fiddle Demo

Answer 1

如评论中所述，动画不像过渡。当 class（或属性）被移除时，过渡会自动产生相反的效果，而动画默认情况下不会这样做。

为了用动画实现它，我们应该创建动画的反向效果并在每次交替点击时添加它。

$('#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>

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

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 动画，正在添加 class，但不删除 class

CSS Animation, working adding class, but not removing the class

css

css-animations