feat: change mui-series pause behavior & add .is-paused for Safari support #97

[ncoden]

Bug:

When animation-play-state: paused is set before the animation start, macOS Safari does not start the animation, even after animation-play-state: running is set. If animation-play-state: paused is set later, macOS Safari correctly play and pause the animation.

See #97 (comment) for more informations.

Fix:

The new queue behavior is the following:

• At first no animation-name is set and the first frame properties are applied. So it looks like the animation is paused at the first frame.
• Start the animation with .is-animating (set animation-name)
• Pause the animation with .is-paused (animation-play-state: paused)
• Restart the animation by removing .is-paused
• Reset the animation by removing .is-animating

Changes:

• 13bb2de Change mui-series behavior for better Safari support
  Do not set the animation name until it need to be played. This is the only way to control the animation start on all browsers (including latest Safari versions). See issue for more informations.

• efd6e38 Add .is-paused mui-series modifier to pause the queue
  As .is-paused is not set when the animation start, macOS Safari handle it correctly and can play and pause the animation.

• 290855e Add documentation to play, pause and reset mui-series

⚠️ BREAKING CHANGE

• When .is-animating is removed from .mui-series, the queue is now reset instead of paused. Setting .is-animating back will start the queue from its begining.

  From now: set .is-paused (without removing .is-animating) to pause the queue. Remove both .is-animating and .is-paused to reset the queue.

• Standard animations names are not supported anymore as mui-series queues names. Make sure you use unique names for your mui-series queues.

  Before

  @include mui-series {
    .shake         { @include mui-queue(3s, 0s, shake); }
    .spin          { @include mui-queue(3s, 0s, spin); }
  }

  After

  @include mui-series {
    .my-serie-shake { @include mui-queue(3s, 0s, shake); }
    .my-serie-spin  { @include mui-queue(3s, 0s, spin); }
  }

---

• Replaces feat: change mui-series paused behavior for Safari support #97 #107
• Closes Mui-Series Safari 11 Compatibility #97

[ncoden]

Poke @SassNinja @hugogiraudel @DanielRuf for review.
This replaces #107. See #97 (comment).

[SassNinja]

@ncoden this is awesome! Good job!

However I was facing an issue while testing.
My example code (taken over from docs) didn't work as expected but the shake animation did start immediately before having added is-animating

@include mui-series {
  .shake    { @include mui-queue(3s, 0s, shake); }
  .spin     { @include mui-queue(3s, 0s, spin); }
  .fade-zoom { @include mui-queue(3s, 0s, fade, zoom); }
}

I checked it and have found out there's already a .shake in my motion-ui.css which comes from _classes.scss.
Precisely it's the animations mixin

@mixin motion-ui-animations {
  .shake    { @include mui-animation(shake); }
  .spin-cw  { @include mui-animation(spin); }
  .spin-ccw { @include mui-animation(spin(ccw)); }
  .wiggle   { @include mui-animation(wiggle); }

Since this also adds the animation name to the CSS the animation of course starts immediately. I fixed it by changing the class names in my HTML & Sass

@include mui-series {
  .shakeX ...

Do you think this is something we should care about?
(maybe adjust the docs)

[ncoden]

animation-play-state: paused cannot be used right away so I don't see any way to support classic animation classes in mui-series. More generally, you mixed classes without knowing it, we cannot expect this to work properly. I can't be upset about my component being invisible after named it .is-hidden 😉.

The documentation example should be modified, but no warning is required. However this modified behavior should be in the migration notes.

Edit: I updated the PR message.

[SassNinja]

Alright!

Apart from that everything looked good to me 👍

[ncoden]

@SassNinja Done.