jquery - 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 进行设置)

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

令人困惑的是，淡出效果很好。

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