Chalarangelo/30-seconds-of-css

[ Height transition ] it's un useful by max-height (question)

maxxiaobao opened this issue · 4 comments

On the example https://codepen.io/anon/pen/jxaWQw, use JavaScript to control the max-height,
I try to use css to finish like below

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: 100%;
}

The result is: when you hover the trigger, the content will showing, but no transition.
This makes me confused, could you tell me the reason when you have time, thanks a lot!

The max-height property needs to be set as the variable:

.trigger:hover > .el {
  max-height: var(--max-height);
}

This message doesn't belong here - but hey @atomiks could you check your Gitter DMs. We need your assistance. Thanks 😄

thanks

lock commented

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.