Question

我试图为我的按钮应用动画，但是我无法让它向后动画，即当类被移除时。它只能向前动画。

基本上我需要做的是：

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

但是动画应该在删除课程之前动画回来。

我怎样才能做到这一点？

编辑：我找到的唯一解决方案是使用不同的类，但我觉得必须有更好的方法。如果可能的话，我不想要处理超过1节课。这是我的尝试：

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>

如何设置前进动画，等待x秒，动画回来然后删除课程？

1 个答案: