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

Answer 2

使用css visibility:hidden将隐藏元素（就像opacity:0一样），但仍会占用空间，元素将围绕它流动，从而保留其容器元素的高度。

问题是jQuery在使用fadeIn / out方法时自动进行显示：block / display：none。我要么使用jquery插件（不知道一个，但有很多）或直接使用css3过渡并滚动你自己的功能（最有效和最有效）。

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

2 个答案: