① Height Transition
index.html
and style.css
have already been provided in the VM.
This code snippet transitions an element's height from 0
to auto
when its height is unknown by performing the following steps:
- Use the
transition
property to specify that changes tomax-height
should be transitioned over a duration of0.3s
. - Use the
overflow
property set tohidden
to prevent the contents of the hidden element from overflowing its container. - Use the
max-height
property to specify an initial height of0
. - Use the
:hover
pseudo-class to change themax-height
to the value of the--max-height
variable set by JavaScript. - Use the
Element.scrollHeight
property andCSSStyleDeclaration.setProperty()
method to set the value of--max-height
to the current height of the element. - Note: This approach causes reflow on each animation frame, which may cause lag when there are a large number of elements below the transitioning element.
<div class="trigger">
Hover over me to see a height transition.
<div class="el">Additional content</div>
</div>
.el {
transition: max-height 0.3s;
overflow: hidden;
max-height: 0;
}
.trigger:hover > .el {
max-height: var(--max-height);
}
let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");
Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
② Summary
Congratulations! You have completed the Height Transition lab. You can practice more labs in LabEx to improve your skills.
Want to learn more?
- 🚀 Practice Smooth Transition of Dynamic Heights
- 🌳 Learn the latest CSS Skill Trees
- 📖 Read More CSS Tutorials
Join our Discord or tweet us @WeAreLabEx ! 😄
Top comments (0)