내용이 숨겨져있을 때 페이지 높이를 유지하는 방법은 무엇입니까?

Question

Ajax 호출을 할 때 페이지의 현재 높이를 유지하려고합니다. 새 콘텐츠를 표시하기 전에 거의 모든 콘텐츠가 숨겨져 있으므로 전환 중에는 콘텐츠가 아래에 없으므로 브라우저가 페이지 상단으로 스크롤됩니다. cortinaIn 및 cortinaOut CSS 규칙

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'); 
     }); 
}); 

및 정의 :

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); 
     }); 
}); 

내가 좋아하는 클래스를 추가하는 방법에 대한 생각

.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

제작하는 것보다 훨씬 간단합니다.

#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 : 당신의 CSS에 다음

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); 
    }); 
}); 

이 있습니다.

Answer 2

css 을 사용하면 (opacity:0처럼) 요소를 숨기지 만 여전히 공간을 차지할 것이고 요소가 주변을 흐르고 따라서 컨테이너 요소의 높이가 유지됩니다.

문제는 jQuery가 fadeIn/out 메서드를 사용할 때 jQuery가 자동으로 display : block/display : none을 수행한다는 것입니다. 나는 jquery 플러그인 (하나는 알지는 못하지만 많은 것들이있다.)을 사용하거나 직접 css3 전환을 사용하고 자신의 함수 (가장 효율적이고 효율적)를 사용한다.