Question

我正在开发一个＆＃34;堆栈＆＃34;组件，受ElastiStack启发。

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

因此，我的堆栈转换不适用于iOS Safari的原因是你只能看到跳转但转换。只要您将过渡时间从.3s延长到1s，您就可以看到开始时的跳转，过渡以及结束时的跳转。

为什么开头和结尾会有跳跃？如何防止它，使过渡更顺畅？

更新：谢谢@vals。我的错误导致了代码段的跳跃效果 - 我更改了transform s上的div css而不是.stack-pane。片段的错误是固定的。

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

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

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

更新：非常奇怪的是，在晚餐后，平稳过渡回到我的iOS Safari ...我的微信在晚餐时崩溃了，我重新打开了它。过渡变得顺利。也许它很简单，因为我测试这些片段时我的iPhone很迟钝。

Answer 1

问题在于<{p>中的i + 1

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

让它跳得越来越好

Answer 2

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

但只有.stackpane有过渡集。

因此，对.stack（可能是不需要的）的更改是突然完成的