CSS 翻译无法在 Safari 上完全运行答案

【问题标题】：CSS translate not working fully on SafariCSS 翻译无法在 Safari 上完全运行
【发布时间】：2014-10-08 05:10:25
【问题描述】：

我的应用程序中有一个元素，当我单击按钮时会滑入视图，然后当我再次单击按钮时会滑出视图。我正在使用 CSS 和 JS 的组合来执行此操作，它在 Chrome 和 Firefox 上运行良好，但它仅在 Safari 中部分运行。

在 Safari 中，它不会滑入，只是突然出现，但随后确实滑出。

任何帮助将不胜感激。提前致谢！

这是 CSS：

#testModes {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

#testModes.testModes-active {
     -webkit-transform: translateY(0);
     transform: translateY(0);
}

还有 JS：

$(document).on('click', '.testModesToggle', function() {
    var state = $('#testModes').attr('class');

    if (state === 'testModes-active') {
        $('#testModes').removeClass('testModes-active').delay(100).fadeToggle();
    } else {
        $('#testModes').fadeToggle(0).addClass('testModes-active');
    }

});

【问题讨论】：

你能用这个添加一个jsfiddle吗？
好的，我把它加到了OP中，这是链接：jsfiddle.net/ewLdm75n/20
为什么你在fadeToggle(0) 中使用0 而不仅仅是toggle()？
因为 toggle() 使它以突然的方式滑动，而不是 fadeToggle(0) 允许 css 转换发生。 0 还可以防止它淡入。

标签： css safari css-transitions css-transforms

【解决方案1】：

好的，我找到了解决方法。只需将 fadeToggle(0) 更改为 slideDown(0) 即可解决问题。我不完全确定为什么，但它有效！代码如下：

$(document).on('click', '.testModesToggle', function() {
    var state = $('#testModes').attr('class');

    if (state === 'testModes-active') {
        $('#testModes').removeClass('testModes-active').delay(100).fadeToggle();
    } else {
        $('#testModes').slideDown(0).addClass('testModes-active');
    }

});

【讨论】：