andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippets/height-transition.md
View File

@ -5,13 +5,12 @@ tags: animation,intermediate
Transitions an element's height from `0` to `auto` when its height is unknown.
- `transition: max-height: 0.5s cubic-bezier(...)` specifies that changes to `max-height` should be transitioned over 0.5 seconds, using an `ease-out-quint` timing function.
- `overflow: hidden` prevents the contents of the hidden element from overflowing its container.
- `max-height: 0` specifies that the element has no height initially.
- `.target:hover > .el` specifies that when the parent is hovered over, target a child `.el` within it and use the `--max-height` variable which was defined by JavaScript.
- `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element.
- `el.style.setProperty(...)` sets the `--max-height` CSS variable which is used to specify the `max-height` of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
- Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.
- Use `transition` to specify that changes to `max-height` should be transitioned over.
- Use `overflow: hidden` to prevent the contents of the hidden element from overflowing its container.
- Use `max-height` to specify an initial height of `0`.
- Use the `:hover` pseudo-class to change the `max-height` to the value of the `--max-height` variable set by JavaScript.
- Use `Element.scrollHeight` and `CSSStyleDeclaration.setProperty()` to set the value of `--max-height` to the current height of the element.
- **Note:** Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.
```html
<div class="trigger">
@ -22,7 +21,7 @@ Transitions an element's height from `0` to `auto` when its height is unknown.
```css
.el {
transition: max-height 0.5s;
transition: max-height 0.3s;
overflow: hidden;
max-height: 0;
}