javascript - 如何向前动画，等待 x 秒，向后动画，然后删除类？

Question

我正在尝试为我的按钮应用动画，但我无法让它向后动画，即当类被删除时。它只会向前动画。

基本上我需要做的是:

• 添加类(class)
• 等待 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>