javascript - 隐藏内容时如何保持页面高度？

Question

我试图在执行 Ajax 调用时保留页面的当前高度。在显示新内容之前，几乎所有内容都被隐藏了，因此浏览器会滚动到页面顶部，因为在过渡期间下方没有内容。

linksPages.on('click',function(e){
            e.preventDefault();
            jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
            $('#content').fadeOut();           
            setTimeout(function() {
                $('#content').html(response).fadeIn();
            }, 500);
        });
});

我考虑过添加一个类:

linksPages.on('click',function(e){
            e.preventDefault();
            jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
            //$('#content').fadeOut();
            $('#content').addClass('cortinaIn');
            setTimeout(function() {
                $('#content').html(response).fadeIn();
                $('#content').removeClass('cortinaIn');
                $('#content').addClass('cortinaOut');
            }, 500);
            $('#content').removeClass('cortinaOut');
        });
});

并定义 cortinaIn 和 cortinaOut CSS 规则:

.cortinaIn {
    transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
    -moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 0.1s;
    -webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: 0.1s;
    -o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -o-transition-duration: 0.3s;
    -o-transition-timing-function: ease-out;
    -o-transition-delay: 0.1s;
    transform:scale(0, 1);
    transform-origin: center center;
    -ms-transform:scale(0, 1); /* IE 9 */
    -ms-transform-origin: center center;
    -webkit-transform:scale(0, 1); /* Safari and Chrome */
    -webkit-transform-origin: center center;
    -o-transform:scale(0, 1); /* Opera */
    -o-transform-origin: center center;
}
.cortinaOut {
    transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
    -moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 0.1s;
    -webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: 0.1s;
    -o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -o-transition-duration: 0.3s;
    -o-transition-timing-function: ease-out;
    -o-transition-delay: 0.1s;
    transform:scale(1, 1);
    transform-origin: center center;
    -ms-transform:scale(1, 1); /* IE 9 */
    -ms-transform-origin: center center;
    -webkit-transform:scale(1, 1); /* Safari and Chrome */
    -webkit-transform-origin: center center;
    -o-transform:scale(1, 1); /* Opera */
    -o-transform-origin: center center;
}

这工作正常，但我无法通过 CSS 转换找到“淡入”和“淡出”效果。有什么想法可以实现这种行为吗？

Answer 1

它比你做的要简单得多。

linksPages.on('click',function(e){
    e.preventDefault();
    jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
         $('#content').addClass('cortinaOut');
         setTimeout(function() {
             $('#content').removeClass('cortinaOut');
         }, 500);
    });
});

然后在你的 CSS 中，有这个:

#content {
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

.cortinaOut {
    transition: opacity 0.3s ease-out;
    opacity: 0;
}

Here's a fiddle showing what I mean .