如何修复CSS/JavaScript中缩放与边距动画不同步的闪烁问题

需求背景 #

我需要通过滚轮事件调整元素的缩放比例（scale）和位置，实现元素平滑居中的效果；另外因为后续要给父容器添加平滑滚动功能，所以一开始选择用margin属性来控制元素的偏移。

遇到的问题 #

当使用CSS transition实现平滑过渡时，发现margin的动画响应速度明显快于scale动画，导致元素会先发生横向偏移，中间的十字标记在缩放过程中会偏离中心位置。你可以通过单次滚动滚轮后等待动画完全结束再进行下一次滚动的方式，很直观地看到这个问题。

解决方案 #

把原本用margin-top和margin-left实现的偏移逻辑，迁移到CSS transform的translate属性中，和scale合并到同一个transform属性里设置。这样就能让偏移和缩放动画同步执行，解决不同步的问题。

代码对比 #

原问题代码

$el.css({
    'transform': "scale(" + scale + ")",
    'margin-top': t + "px",
    'margin-left': l + "px",      
});

修复后的代码

$el.css({
    'transform': "translate(" + t + "px, " + l + "px) scale(" + scale + ")",
});

内容的提问来源于stack exchange，提问作者Mario