CSS翻译不能在Safari上完全运行

Question

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

在Safari中，它不会滑入，但只会突然显示，但它会滑出来。

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

JS小提琴：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');
    }

});