search

JaeYeopHan / tip-archive

📦 Archiving various development tips. If you watch this repository, you can get issues related to the newly registered development tip from the GitHub feed.
https://www.facebook.com/Jbee.dev/
245 stars 8 forks source link

CSS transition tip and trick #55

Open JaeYeopHan opened 5 years ago

JaeYeopHan commented 5 years ago

Description

height transition

이렇게 transition을 먹일 경우, 먹지 않는다. max-height를 100%로 크게 먹히고 max-height를 기준으로 transition을 먹인다.

.normal {
  height: 100%
  max-height: 500px;
  transition: max-height .3s;
}

.expand {
  max-height: 0px; # or target height pixcel value
}