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 正确地排序渲染。