Question

我有一个ul元素，应该在点击时展开。我使用CSS过渡。点击Javascript分配＆＃34; select_ul_open＆＃34; -class。这些是相关的样式属性：


    .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 Browser上是不稳定的。人们告诉我将

    tratranslate3d(0px,0px,0px)

添加到我的代码中，这会激活硬件加速，但这对于高度转换并没有用。

我也尝试用jQuery使其成为淡入淡出。有趣的是，它适用于iOS，但不适用于Chrome等桌面浏览器。

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

干杯，大卫

Answer 1

不知道你是否已经解决了这个问题，但这里有几件事要尝试：

添加＆＃34;溢出-y：隐藏＆＃34;到＆＃34; .select_ul {＆＃34;
删除＆＃34;可见性＆＃34;完全
过渡只应建立一次，用于＆＃34; .select_ul {＆＃34;而不是＆＃34; .select_ul_open＆＃34;

所以，你的代码应该是：

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

如果仍然无效，请尝试用＆＃34;线性＆＃34;

替换过渡时间功能

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

另外，我确定这只是一个堆栈交换错字，但值得指出：

tratranslate3d(0px,0px,0px)

应该是：

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

......但是反正真的不应该这样做。希望这会有所帮助。干杯！

iOS 8 Safari - 高度过渡生涩

1 个答案: