네이티브 CSS 애니메이션을 사용하여 슬라이딩 방식으로 요소를 숨기고 표시하기 위한 작은 (~ 500b gzip으로 압축 된) 라이브러리입니다.

https://alexmacarthur.github.io/slide-element/

https://github.com/alexmacarthur/slide-element

기본적으로 jQuery의 slideUp(), slideDown() 및 slideToggle()의 최신 변형입니다.

JavaScript를 사용하여 요소를 열고 닫는 애니메이션을 만드는 것은 특히 동적 콘텐츠가 포함 된 경우 간단한 작업이 아닙니다.

jQuery의 slideToggle()과 같은 것을 사용할 수 있지만 이 경로를 사용하려면 필요 이상으로 많은 코드를 사용해야 합니다.

또 다른 옵션은 CSS를 사용하여 요소의 최대 높이 값을 변경하는 것입니다. 그러나 이 접근 방식은 임의성으로 가득 차 있으며 얼마나 많은 콘텐츠를 애니메이션 할 것인지 확실하지 않을 때 잘 풀기 어렵습니다.

이 라이브러리는 네이티브 CSS 전환을 사용하여 작업을 수행하지만 요소의 높이가 고정 될 필요는 없습니다.

대신 요소 높이가 해당 콘텐츠를 기반으로 계산 된 다음 적절한 값이 적용되어 부드러운 네이티브 전환이 트리거됩니다.