Question

我有一个keyframes动画，用于将div从scale(1)放大到scale(1.2)。这对我来说很好。现在我正在尝试的是，在click上button并通过移除class zoom-in停止动画放大，并从中缩放回scale(1)通过添加另一个类来单击按钮的当前scale时刻。因此，当zoom-in动画以5s的持续时间开始且动画未完成时，例如在scale(1.07)处，我击中button时，应该从此时zoom-in回到初始zoom-out，停止scale(1.07)和scale(1)。我不知道如何在当前zoom-out位置上开始scale动画。此刻，它向前跳到scale(1.2)，然后缩放而不是向后缩放。如果第一个动画完成了，这看起来不错，但是如果我早些时候打了它就不好了。希望已经足够清楚了，这是我的摘录：

$('.stopZooming').click(() => {
  $('.animated').removeClass('zoom-in');
  $('.animated').addClass('zoom-out');
});

.wrapper {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  position: relative;
  margin-bottom: 50px;
}

.animated {
  width: 100%;
  height: 100%;
  background: lightcoral;
  position: absolute;
}

.zoom-in {
  animation: zoomIn 5s 1;
  animation-fill-mode: forwards;
}

.zoom-out {
  animation: zoomOut 5s 1;
  animation-fill-mode: forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="animated zoom-in"></div>
</div>

<button class="stopZooming">Zoom me back!</button>

关键帧停止缩放并从当前缩放位置缩放

0 个答案: