Animating to display none

The mobile .primary-navigation currently animates from display: none to display: block.

For a long time, transitioning anything between these was impossible, and animating using @keyframes required a few tricks to make work.

We can now use transition-behavior: allow-discrete to enable transitions when we are going to and from display: none (and other properties that only allow for discrete animations).

First steps

Inside the media query, let's start by adding a opacity: 0 declaration on our .primary-navigation, alongside the display: none.

Then, when it's opened, we can add a opacity: 1.

@media (width > 720px) {
  .primary-navigation {
    /* other styles */
    display: none;
    opacity: 0;
  }

  [aria-expanded="true"] + .primary-navigation {
    display: block;
    opacity: 1;
  }
}

Next, we need to add a transition, and for this to work, we need to transition both the display property and the opacity.

@media (width > 720px) {
  .primary-navigation {
    /* other styles */
    display: none;
    opacity: 0;

    transition: display 1s, opacity 1s;
  }
}

This won't work quite yet though, we need one more thing, adding a transition-behavior: allow-discrete.

@media (width > 720px) {
  .primary-navigation {
    /* other styles */
    display: none;
    opacity: 0;

    transition: display 1s, opacity 1s;
    transition-behavior: allow-discrete;
  }
}

And we're half way there! The transition will work when we close the nav menu, but not when we open it.