다양한 높이의 슬라이더 후 컨텐츠 변경 위치에 대한 전환

Question

다양한 높이의 슬라이드가있는 슬라이더가 있습니다. 부작용으로 슬라이더 div 이후의 내용은 각 슬라이드가 변경 될 때 위아래로 "점프"됩니다. 여기 내 질문 : 슬라이더 높이를 변경하면 슬라이더를 부드럽게 위치로 이동 한 후 콘텐츠를 어떻게 얻을 수 있습니까? 나는 CSS transition 속성으로 놀았지만 아무 소용이 없었다. ,

<slider></slider> 
<rest-of-content></rest-of-content> 

비록 : http://www.apple.com/tvos/

Answer 1

는 기본적으로,이 레이아웃을 가지고 :

여기가 바로했던 애플의 페이지 중 하나에 대한 링크가있어, 내가 목표로하고있는 무슨을 설명하기 위해 실제로 <slider> 높이가 변경되었을 때 페이지에서 <rest-of-content>의 위치가 바뀌면 아무 것도 없음에서 변경할 수 있습니다. 원활하게 점프 할 수 있도록 <rest-of-content>에서 변경할 수 있습니다. height 속성을 <slider>으로 부드럽게 변경해야하며, 자동으로 그 이후의 모든 내용은 DOM에서 원활하게 변경됩니다.

슬라이더의 속성에 애니메이션을 적용하는 것은 사용하는 슬라이더에 따라 크게 다르지만, 그 중 상당수는 초기 설정을 통해 높이 변경을 부드럽게 애니메이션으로 적용하는 기능을 제공합니다. 나는 어떤 식 으로든 그것을지지하지는 않는다. 그러나 나는 확실히 이것을 알고있다 slick carousel이 옵션을 가지고있다. '적응 형 높이'섹션까지 아래로 스크롤합니다.

물론 지금 사용하는 슬라이더를 유지하고 슬라이드 변경을 시작하고 새 슬라이드의 높이를 가져오고 슬라이더 컨테이너의 높이를 새 것으로 일치시키는 콜백을 사용할 수 있습니다. 콘텐츠가 건너 뛰지 않게하려면 전체 슬라이더에 대해 overflow:hidden으로 컨테이너를 사용하고 슬라이드가 바뀔 때마다 해당 컨테이너의 max-height을 변경하는 것이 좋습니다.

위의 내용이 의미가 있으며 도움이 되길 바랍니다.