Animating the list items

We can also transition the list items using the same method.

It might seem like we wouldn't need to use @starting-style for them, but we still do.

This is because they aren't rendered at all, until the display on the parent is switched to block.

Because of that, we have the same issue, where they're rendered in their final state with nothing to transition from.

.primary-navigation {
  li {
    /* transition to this on exit */
    opacity: 0;
    transition: opacity 1s;
  }
}

[aria-expanded="true"] + .primary-navigation {
  li {
    /* final opened state */
    opacity: 1;

    @starting-style {
      /* transition from this on entry */
      opacity: 0;
    }
  }
}

Sliding them in

.primary-navigation {
  li {
    /* transition to this on exit */
    opacity: 0;
    translate: 100%;

    transition: opacity 300ms translate 875ms;
    transition-delay: 125ms;
  }
}

[aria-expanded="true"] + .primary-navigation {
  li {
    /* final opened state */
    translate: 0;
    opacity: 1;

    @starting-style {
      /* transition from this on entry */
      translate: 100%;
      opacity: 0;
    }
  }
}

Staggering the transition

We could also stagger in each element with the help of a custom property!

.primary-navigation {
  li {
    /* transition to this on exit */
    opacity: 0;
    translate: 100%;

    transition: opacity 300ms translate 875ms;
    transition-delay: var(--delay, 125ms);

    &:nth-child(2) {
      --delay: 250ms;
    }

    &:nth-child(3) {
      --delay: 325ms;
    }
  }
}

[aria-expanded="true"] + .primary-navigation {
  li {
    /* final opened state */
    translate: 0;
    opacity: 1;

    @starting-style {
      /* transition from this on entry */
      translate: 100%;
      opacity: 0;
    }
  }
}