CSS动画，工作添加类，但不删除类

Question

我有这个关键帧

@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）时，它不会显示动画。元素转到正确的位置，但没有任何动画。 我错过了什么？ 我的班级关闭是空的

.close {

}

非常感谢

更新：添加小提琴 Demo

Answer 1

正如评论中所提到的，动画不像过渡。删除类（或属性）时，Transitions会自动执行相反的效果，而默认情况下动画不会执行此操作。

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

＆＃13;

＆＃13;

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

＆＃13;

/************** 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

/************** 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;