CSS翻译不能在Safari上完全工作

Question

我的应用程序上有一个元素，当我点击按钮时滑入视图，然后当我再次点击按钮时滑出视图。我这样做与CSS和JS的组合，它在Chrome和Firefox上工作得很好，但它只在部分Safari中工作。

在Safari中，它不会滑动进来，只是突然出现，但它可以很好地滑动出来。

任何帮助都会很感激。提前感谢!

JS Fiddle: http://jsfiddle.net/ewLdm75n/20/

下面是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');
    }
});

Answer 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');
    }
});