jquery - 如何让动画倒退

Question

所以，我这里有这个草图:

$('button').on('click', function(){
  $('.block').toggleClass('hide');
});

div {
  height: 300px;
  width: 300px;
  background-color: red;
  animation: anim .2s;
}

.hide {
  display: none !important;
}

@keyframes anim {
    from {opacity: 0; transform: translateX(-100%);}
    to {opacity: 1; transform: translateX(0);}}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">press me</button>
<div class="block hide"></div>

它按我想要的方式工作，除了它在第二次按时隐藏之外。因此，我需要使 block 在向内移动时具有动画效果，但向后移动(因此它会移开)。

我应该如何正确地做到这一点？

Answer 1

如果你想在删除类时使动画反转，使用 transition 会更容易在 CSS 中为 transform 制作动画和opacity特性。然后你就可以免费获得该行为:

$('button').on('click', function() {
  $('.block').toggleClass('hide');
});

div {
  height: 300px;
  width: 300px;
  background-color: red;
  transform: translateX(0);
  transition: opacity 0.2s, transform 0.2s;
  opacity: 1;
}

div.hide {
  transform: translateX(-100%);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">press me</button>
<div class="block hide"></div>