[Code Snippet] CSS enter/exit animation for [display:none]

Snippet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<css-selector>{
    &.hidden {
        display: none;
        opacity:   0.0;
        transform: scale(0.8);
    }
    opacity: 1;
    transform: scale(1);
    transition:
        opacity   0.3s ease-in,
        transform 0.3s ease-in,
        display   0.3s ease-in;
    transition-behavior: allow-discrete;
    @starting-style {
        opacity: 0;
        transform: scale(0.8);
    }
}

Exampel

• Version-1: “Hello World Box Toggle” without Animation
  • via using classanme .hidden and display:none to control hide/show behaviour
• Version-2: … with Entry Animation
  • via using @starting-style to describe the off-stage starting place styling when coming from display:none
• Version-3: … also with Exit Animation
  • via using transition-behavior:allow-discrete and transition:display 0.4s to delay the applicaiton of display:none for 0.5s , till after the transition animation has been played

(Source code can be found: here)

Reference

• https://css-tricks.com/almanac/rules/s/starting-style/ <– This one best explains the underlying mechnism
• https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects
• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
• https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style