在身体上隐藏溢出会破坏CSS过渡

Question

我正在使用CSS3过渡属性创建一种模态，并希望在打开模态时阻止正文滚动。当Javascript向body添加“noscroll”类时，所有CSS转换都将停止工作。

这是javascript：

var blurPage = function() {
    $("body").addClass("noscroll"); //Add the noscroll class to body

    //This part just adds classes to elements within body

    var a = $('article.full').add('section.halfwrap');
    for (var i = 0; i <= a.length; i++) {
        if ($(a).hasClass('full')) {
            a.addClass('shadow');
        }
        var b = $(a[i]).children();
        for (var j = 0; j <= b.length; j++) {
            $(b[j]).addClass('blur');
        }
    }
    $('#post-main').addClass('active');
}

这是CSS：

body {
    background: #F7F4F2;
}
body.noscroll {
    overflow-y: hidden;
}

如果我从body.noscroll中删除overflow-y：hidden属性，动画就可以了。

如果不是使用CSS类，我也会遇到同样的问题：

$('body').css("overflow-y", "hidden");