2 ms·
Excited for the ability to animate display and intrinsic heights but: "Traditionally, animating something into our out of the screen (as opposed to just hiding
by makingstuffs 2y ago
Excited for the ability to animate display and intrinsic heights but:
"Traditionally, animating something into our out of the screen (as opposed to just hiding it visually) required JavaScript to remove the element from the page after waiting for the animation or transition to complete. No longer!"
Is simply untrue. I’ve been animating in/out of the screen with pure CSS transitions for a very long time. The trick is a simple one, use transition delays and combine with a combination of `position`, `z-index`, `visibility`, `opacity`, `max-width` and `max-height`. It is pretty simple:
Animate out:
```
max-height: 0;
max-width: 0;
visibility: hidden;
opacity: 0;
z-index: -1;
padding: 0;
margin: 0;
transition: opacity 0.5s ease 0s, max-height 0s 0.5s, z-index 0s 0.5s, max-width 0s 0.5s, visibility 0s 0.5s, padding 0s 0.5s, margin 0s 0.5s;
```
Animate in:
```
max-width: 100%;
max-height: 100%;
visibility: visible;
opacity: 1;
z-index: 1;
padding: 20px;
margin-top: 20px;
transition: opacity 0.5s ease 0.1s, max-height 0s 0s, z-index 0s 0s, max-width 0s 0s, visibility 0s 0s, padding 0s 0s, margin 0s 0s;
```
The principle is a simple one: You simply delay the properties which can't be animated until after the ones which can have finished running ¯\_(ツ)_/¯
Here's a pen if it helps anyone: https://codepen.io/PaulSinghDev/pen/zYQodoq?editors=1111 https://codepen.io/PaulSinghDev/pen/zYQodoq?editors=1111
Granted this could be considered hiding visually but max-width: 0, max-height: 0, visibility: hidden is essentially display: none