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>

它可以按我的意愿工作，但事实是它在第二次按下时就隐藏了。因此，我需要使块在移动时动画化，但向后移动（这样就可以移动）。

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

Answer 1

如果要在删除类时使动画反向显示，则在CSS中使用transition为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>

如何使动画倒退

1 个答案: