CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

How to animate height from 0 to auto using CSS Transitions


transform height 0


https://codepen.io/eond/pen/mdeqKjL 


CSS로 하는 방법

방법1. max-height:100vh 주는 방법

방법2. css clip rect 로 하는 방법(코드펜에서 방법5로 소개함,코드펜방법3은 방법1과 동일함.ㅠ)

- 단점은 높이값을 px로 줘야한다;


jQuery로 하는 방법

방법3. slideToggle()

방법4. jquery if else animate height


방법5. 임수님 팁 앵귤러로 하는 방법 

https://stackblitz.com/edit/height-toggle-demo?file=src%2Fapp%2Fheight-toggle%2Fheight-toggle.directive.ts


방법6. .

혹시 괜찮으시면

https://ionicframework.com/docs/utilities/animations

이걸로도 테스트해보세요

이게 제이쿼리 애니메이션보단 좋을거에요


이번에 아이오닉5에 나온 애니메이션 모듈인데

그냥 독립적으로 쓰일 수 있어서 그냥 js에서도 사용가능해요

저도 저걸로 대체해봤는데 성능차이 실감했어요


프레임60을 보장해요


방법7. jquery slideup slidedown

https://codepen.io/eond/pen/LYpOgWb


추천한 사람

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기