애니메이션 페이지 리플 로우?

Question

div의 내용을 바꾸고 있습니다. (이전 내용이 희미 해져서 새 내용이 사라집니다.) 내용이 약간 다르므로 변경된 순간에 아래에있는 모든 내용이 재편성됩니다.

제 질문은이 운동을 부드럽게하는 방법이 있습니까?

나는 이것을 수행 할 수있는 유일한 방법은 자바 스크립트를 사용하여 시작과 끝 요소의 높이 (내 경우에는 수직 정렬이 바뀌는 블록 만 처리하는 것)를 미리 결정하는 것입니다. ,이 값들을 직접 할당하십시오. 일단 이렇게하면 CSS3 전환이 즐거운 애니메이션을 적용 할 것이라고 확신합니다.

명시적인 크기를 지정하지 않고이를 얻을 수있는 방법이 있습니까? 경험이 풍부한 항목을 애니메이션 방식으로 페이지 주위를 돌아 다니는 어떤 시점에서 회상하는 것 같습니다. 이것은 내가 CSS를 사용하여 이루어질 수 있기를 희망합니다.

Answer 1

일반적으로 높이를 계산할 수 있도록 새 콘텐츠를 보유하는 임시 (보이지 않는) 요소를 만듭니다. 그 후 원래 요소는 현재 높이에서 새로 계산 된 높이까지 애니메이션 될 수 있습니다.

필요한 모든 스타일 캐스케이드 제대로 상속받을은 (예를 들어, 새로운 콘텐츠의 높이를 계산하는 것은 쓸모없는 것이 올바른이없는 경우 있도록 만든 임시 요소가 원래의 요소의 동일한 형제는 것이 중요하다 명시 적으로 설정 상이한 높이 사이 애니메이션 동안 font-size는

)인가 (즉 CSS3 (transition: height .5s ease;)로 달성 될 수 있음) 상술 한 바와 같이, 암시 적으로 설정 상이한 높이 (즉 height:auto로 원소 함량을 수정)

작동되지 JS로