如何防止css过渡期间的跳转？答案

【问题标题】：How to prevent the jump during css transition?如何防止css过渡期间的跳转？
【发布时间】：2015-12-29 21:08:40
【问题描述】：

我正在开发一个“堆栈”组件，其灵感来自ElastiStack。

DEMO HERE。该演示在桌面 Chrome 上运行良好。但是转换在我的 iOS Safari 中不起作用。我提取了一个small snippet，发现动画开始和结束时会有空间跳跃。这种跳跃发生在桌面版 Chrome 和 iOS Safari 中。

所以我的堆栈过渡在 iOS Safari 上不起作用的原因是您只能看到跳转但过渡。只要将过渡时间从.3s 延长到1s，就会看到开始处的跳转、过渡处和结尾处的跳转。

为什么开头和结尾都有跳跃？如何预防，让过渡更顺畅？

更新：谢谢@vals。 sn-p 的跳跃效果是我的错误造成的——我在divs 上更改了transform css 而不是.stack-pane。修复了 sn-p 的 bug。

但是，在我的堆栈演示中，我仍然不知道如何防止 iOS Safari 上的跳转。

This snippet 可以更好地说明我的问题。请在 iOS Safari 上试用。

事实证明，在 iOS Safari 上，过渡结束时会发生意外的跳转。

更新：很奇怪，吃完晚饭后，平滑过渡回到我的iOS Safari……我的微信在晚餐时崩溃了，我重新打开了它。过渡变得平滑。所以也许这很简单，因为我的 iPhone 在测试 sn-ps 时速度很慢。

【问题讨论】：

@CodeiSir, the snippet 也可以在我的桌面 chrome 上重现跳转。我更喜欢 css-transition 到 css-animation，因为它更容易配置（过渡时间、不透明度等）到 jquery animate，因为 jquery animate 无法轻松地为 transform 设置动画（必须使用步骤），我担心使用jquery animate 为许多堆栈窗格设置动画的效率。我想知道跳转是否是因为在浏览器中动画translate3d 很慢。让我做一些实验。

【解决方案1】：

您正在转换“div”，因此您将更改同时应用于 .stack 和 .stackpane。

但只有 .stackpane 有过渡集。

所以，对 .stack 的更改（这可能是不需要的）是突然完成的

【讨论】：

【解决方案2】：

http://codepen.io/anon/pen/PZbWQM

问题是i + 1 在

$(this).css({
    transform: 'translate3d(' + (-50 * (i + 0)) + 'px, 0, ' + (50 * (i + 0)) + 'px)'
});

Wich 让它领先了

【讨论】：