CSS'scale'打破了jQuery'fadeIn'

Question

单击菜单按钮时，我在内容上有一个全宽，透明的叠加淡入淡出。我的问题是我添加了一个CSS变换缩放效果来缩小内容（也会模糊）并且缩放会破坏叠加渐变。

$('.menu').click(function(){
    if(!$('.menu').hasClass('active')){
        $('.menu').addClass('active');

        $('.overlay-bg').fadeIn();

        $('.content').addClass('zoom');
        $('.content').addClass('blur');
    }else{
        $('.menu').removeClass('active');

        $('.overlay-bg').fadeOut();

        $('.content').removeClass('zoom');
        $('.content').removeClass('blur');
    }
});

相关的CSS是：

.content{
    background-color: #fff; 
    margin: 0 auto; 
    width: 100%; 
    transition: all 1s ease; 
    -webkit-transition: all 0.5s ease;
}

.zoom{
    transform: scale(0.8); 
    -webkit-transform: scale(0.8);
}

http://jsfiddle.net/forxs/NAZ7D/1/

它似乎在Safari中正常运行，但不适用于Chrome（尚未针对FF或IE设置）

澄清一下，由于添加了比例，叠加不再淡入，它只是在动画时间结束后出现...

令人困惑的是，fadeOut工作正常。

Answer 1

Updated Fiddle

将您的jQuery更改为：

$('.menu').click(function () {
    if (!$('.menu').hasClass('active')) {
        $('.menu').addClass('active');


        setTimeout(function () {

            $('.content').addClass('zoom blur');

        }, 50);

        $('.overlay-bg').fadeIn();
    } else {
        $('.menu').removeClass('active');

        $('.overlay-bg').fadeOut();

        $('.content').removeClass('zoom blur');
    }
});

这里的关键部分是在超时中包含初始转换 - 这似乎迫使Chrome正确地对渲染进行排序。