CSS如何从最近应用的变换中制作动画？

Question

我在拖动时将一个动态transform应用于元素，例如：

HTML

<div style="transform: `translateX(${distance}px) translateY(-${distance / 10}px) rotate(-2deg) scale(0.9)`">
  Drag Me
</div>

但是，当达到一定距离后，我会通过添加自定义class来完成动画，例如completeAnimation，规则如下：

@keyframes animation {
  0% {
  }
  50% {
    transform: translateX(270px) translateY(-50px) rotate(-15deg) scale(0.8);
  }
  100% {
    transform: translateX(470px) translateY(50px) rotate(-15deg) scale(0.8);
  }
}

.completeAnimation {
    animation-duration: 1s;
    animation-name: swipeRight;
    animation-fill-mode: animation;
}

但很明显，当课程completeAnimation应用于class属性时，它会跳回到默认显示状态并直接完成100% css中的animation。< / p>

有没有办法让最后一次应用style的动画停止？