如何隱藏內容時的頁面高度？

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自動執行display：block/display：none。我要麼使用一個jQuery插件（不知道一個，但有很多），或者直接使用css3轉換和滾動你自己的功能（最有效和最有效的）。