In 'n' Out

Animations

Animating elements as they transition in and out of the DOM. It's cool we can do it, easier than it used to be, but still kinda hard.

We're gonna start with a <dialog> element.

A <dialog> is a reasonable thing to want to animate anyway, but there is a more important reason.

A <dialog> element is display: none; when it is closed.

Animating to and away from display: none; has historically sucked.

So one thing we're talking about is animating any element to and away from display: none;

.thing {
  display: none;
  
  &.open {
    display: block;
  }
}
dialog {
  opacity: 0;
  transition: 
    1s opacity,
    1s display allow-discrete;

  &:open {
    /* as it arrives in the DOM, 
       it's already this. */
    opacity: 1;
  }
}

❌ Dialog instantly appears

❌ Backdrop instantly appears

✅ Dialog fades out

❌ Backdrop instantly hides

dialog {
  opacity: 0;
  transition: 
    1s opacity,
    1s display allow-discrete;

  &:open {
    opacity: 1;
  }
  
  @starting-style {
    &:open {
      opacity: 0;
    }
  }
}

✅ Dialog fades in

❌ Backdrop instantly appears

✅ Dialog fades out

❌ Backdrop instantly hides

dialog {
  opacity: 0;
  transition: 
    1s opacity,
    1s display allow-discrete,
    1s overlay allow-discrete;
  
  &::backdrop {
    opacity: 0;
    transition: opacity 1s;
  }

  &:open {
    opacity: 1;
    &::backdrop {
      opacity: 1;
    }
  }
  
  @starting-style {
    &:open {
      opacity: 0;
      &::backdrop {
        opacity: 0;
      }
    }
  }
}

✅ Dialog fades in

✅ Backdrop fades in

✅ Dialog fades out

✅Backdrop fades out

dialog {
  transition: 
    /* Stuff to animate */
    1s display allow-discrete,
    1s overlay allow-discrete;
  
  /* The way out */
  &:not(:open) {
  }

  /* While open */
  &:open {
    &::backdrop {
    }
  }
  
  /* The way in */
  @starting-style {
    &:open {
      &::backdrop {
      }
    }
  }
}

deck

By chriscoyier

deck

  • 6

More from chriscoyier