jquery - iOS 8 Safari - 高度过渡不稳定

Question

我有一个 ul 元素，它应该在点击时展开。我为此使用 CSS 转换。单击 Javascript 会分配“select_ul_open”类。这些是相关的样式属性:

    .select_ul {        height: 0px;        visibility: hidden;        transition: height .4s cubic-bezier(0.5, 0, 0, 1.000), visibility 0s linear .4s;    }    .select_ul.select_ul_open {        height: 320px;        visibility: visible;        transition: height .4s cubic-bezier(0.5, 0, 0, 1.000), visibility .4s linear 0s;    }

它在所有常见的桌面浏览器上运行良好。然而，它在 iOS Mobile 或 Android 浏览器上是不稳定的。人们告诉我添加

    tratranslate3d(0px,0px,0px)

我的代码激活了硬件加速，但高度转换没有成功。

我还尝试使用 jQuery 使其淡入。有趣的是，它在 iOS 上运行良好，但在 Chrome 等桌面浏览器上运行不佳。

这个问题有通用的解决方案吗？如果没有，是否有任何其他方法可以实现平滑的淡入过渡？

干杯，大卫

Answer 1

不知道你是否已经解决了这个问题，但这里有一些事情可以尝试:

• 将“overflow-y: hidden”添加到“.select_ul {”
• 完全删除“可见性”
• 转换应该只建立一次，将它用于“.select_ul {”而不是“.select_ul_open”

所以，你的代码应该是:

.select_ul {
    height: 0px;
    transition: height .4s cubic-bezier(0.5, 0, 0, 1.000);
}
.select_ul.select_ul_open {
    height: 320px;
}

如果仍然不起作用，请尝试用“线性”替换转换计时函数:

.select_ul {
    height: 0px;
    transition: height .4s linear;
}
.select_ul.select_ul_open {
    height: 320px;
}

此外，我确定这只是一个 stackexchange 错字，但值得指出:

tratranslate3d(0px,0px,0px)

应该是:

transform: translate3d(0px,0px,0px);

...但无论如何都不需要。希望这有帮助。干杯!