如何向前动画，等待x秒钟，向后动画，然后删除课程？

Question

我正在尝试为按钮应用动画，但是无法使其向后动画，即在删除类时。 它只动画向前。

基本上我需要做的是：

• 添加课程
• 等待4秒
• 删除课程

但是动画应该在移除类之前重新进行动画处理。

我该如何实现？

编辑：我发现的唯一解决方案是为此使用不同的类，但我认为必须有更好的方法。 如果可能的话，我不想处理超过一堂课。 这是我的尝试：

doStuff = function() {

  /... some code .../

  button.classList.add('btn-success-msg');

  setTimeout(function() {
    button.classList.remove('btn-success-msg');
  }, 4000);
}

@keyframes btn-message {

  0% {
    width: 0;
    opacity: 0;
    visibility: hidden;
  }

  100% {
    width: 100%;
    opacity: 1;
    visibility: visible;
  }
}

.btn-success-msg {
  position: relative;

  &:before {
    @include pos(0, $left: 0);
    content: 'Success!';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px solid $success;
    border-radius: 5px;
    background-color: $success;
    color: white;
    animation: btn-message 500ms forwards;
  }
}

Answer 1

您应该使用过渡而不是动画来实现此效果。 更改属性时会发生转换，因此，添加或删除类时，它可以触发转换。 此外，如果在转换完成之前删除了该类，它将自动撤消转换而不会跳过。

 var testing = $('.testing'); // after 1 second, add a class setTimeout(function() { testing.addClass('animate'); }, 1000); // after 4 seconds, remove the class setTimeout(function() { testing.removeClass('animate'); }, 4000); 

 .testing { background: red; width: 100px; transition: transform 2s; } .animate { transform: translateX(200px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="testing">testing</div>