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 Browser上很干。人们告诉我在我的代码中添加

 
    tratranslate3d(0px,0px,0px) 

，激活了硬件加速功能，但这并不适用于高度过渡。

我也试着让它淡入jQuery。有趣的是，它适用于iOS，但不适用于Chrome等桌面浏览器。

有没有解决这个问题的通用解决方案？如果没有，是否有其他方法可以平滑淡入淡出？

干杯， 大卫

Answer 1

不知道你有没有这个解决了，但这里有一些事情要尝试：

• 添加“溢出-Y：隐藏”到” .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); 

......但是这真的不需要反正。希望有帮助。干杯!