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

Add extractor and builder

Browse Source 
Tested and working
This commit is contained in:
Angelos Chalaris
2019-08-22 14:04:18 +03:00
parent 343f8fd4c7
commit a8818b1998
101 changed files with 18465 additions and 9908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/height-transition.md
View File

@ -5,8 +5,6 @@ tags: animation,intermediate
Transitions an element's height from `0` to `auto` when its height is unknown.
#### HTML
```html
<div class="trigger">
Hover me to see a height transition.
@ -14,8 +12,6 @@ Transitions an element's height from `0` to `auto` when its height is unknown.
</div>
```
#### CSS
```css
.el {
transition: max-height 0.5s;
@ -28,28 +24,20 @@ Transitions an element's height from `0` to `auto` when its height is unknown.
}
```
#### JavaScript
```js
var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
```
#### Demo
#### Explanation
##### CSS
1. `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.
2. `overflow: hidden` prevents the contents of the hidden element from overflowing its container.
3. `max-height: 0` specifies that the element has no height initially.
4. `.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.
##### JavaScript
---
1. `el.scrollHeight` is the height of the element including overflow, which will change dynamically
based on the content of the element.
2. `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.