如何防止在 css 转换期间跳转？

Question

我正在开发一个 "stack" 组件，它的灵感来自 ElastiStack。

DEMO HERE. The demo works fine on desktop Chrome. But the transition is not working in my iOS Safari. I extracted a small snippet发现动画开始和结束的时候space会有一个跳转。跳转发生在桌面 Chrome 以及 iOS Safari 中。

所以我的堆栈转换在 iOS Safari 上不起作用的原因是你只能看到跳跃而不能看到转换。只要把.3s的过渡时间延长到1s，就会看到开头的跳转，过渡的，结尾的跳转。

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

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

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

This snippet 更能说明我的问题。请在 iOS Safari 上试用。

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

更新：很奇怪，吃过晚饭后，流畅的切换回我的iOSSafari...我的微信在吃晚饭的时候崩溃了，我重新打开了。过渡变得平滑。所以也许这很简单，因为我的 iPhone 在测试代码片段时反应迟钝。

Answer 1

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

问题是 i + 1 在

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

Wich 使它领先

Answer 2

您正在转换 "div"s，因此您正在将更改应用到 .stack 和 .stackpane。

但只有 .stackpane 有过渡集。

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

如何防止在 css 转换期间跳转？

How to prevent the jump during css transition?

css

jquery

ios

css-transitions