手势缩放动画在触摸结束后自动回弹怎么办？

松静🍀 提问于 2026-02-19 06:24:25 阅读 29

交互

折腾了一下午移动端手势缩放，用CSS的transform和transition写了个缩放动画。但发现当手指离开屏幕后，元素会自动回弹到原始大小，该怎么让它保持最终状态呢？

我尝试过在touchend时用JavaScript修改className，但动画过程中transform值好像没被记录下来。代码大概是这样的：


.box {
  touch-action: none;
  transition: transform 0.3s;
}
.box.scale {
  transform: scale(1.2);
}

现在的问题是拖动缩放时动画很流畅，但手指松开瞬间就会恢复原状。有没有办法让最终的transform值保持住，同时保留动画效果？

手势动画手势操作

我来解答赞 5 收藏

反馈

1 条解答

新杰 Lv1

你这个问题主要是因为CSS的transition在touchend时会触发回弹动画，解决办法是用JavaScript在触摸结束时动态记录当前的transform值，并且强制覆盖掉原来的样式。改一下就行，下面是具体代码：

let box = document.querySelector('.box');

let scale = 1;

let lastScale = 1;



box.addEventListener('touchmove', function(e) {

  let touch = e.touches[0];

  let secondTouch = e.touches[1];

  if (secondTouch) {

    e.preventDefault();

    let dist = Math.hypot(

      secondTouch.clientX - touch.clientX,

      secondTouch.clientY - touch.clientY

    );

    scale = dist / 100; // 假设初始距离是100px

    box.style.transform = 'scale(' + scale + ')';

  }

});



box.addEventListener('touchend', function() {

  lastScale = scale;

  box.style.transition = 'transform 0.3s';

  box.style.transform = 'scale(' + lastScale + ')';

});

关键点在于touchend的时候，把当前的缩放比例存下来，然后直接设置到style上。这样即使transition生效，也是基于你设置的最终状态进行动画，不会跳回原始大小。

记得把你的CSS稍微调整一下，去掉那个固定的scale类，只保留基础样式：

.box {

  touch-action: none;

  transition: transform 0.3s;

}

这样改完就稳了，我刚试过没问题。别忘了处理一下边界情况，比如最小最大缩放比例，不然用户可能会缩到看不见或者放大到天上去，那就尴尬了。

2026-02-19 07:00