From e2747521bc66e12e4de19f622d55ae784cd054bf Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 6 May 2018 22:34:22 +0200 Subject: [PATCH] feat: add ".is-paused" mui-series modifier to pause the queue As `.is-paused` is not set at the animation definition, Safari handle it correctly and can play and pause the animation. See https://github.com/zurb/motion-ui/issues/97#issuecomment-386896941 --- docs/configuration.md | 1 + docs/src/configuration.md | 1 + src/_settings.scss | 1 + src/util/_series.scss | 6 ++++++ 4 files changed, 9 insertions(+) diff --git a/docs/configuration.md b/docs/configuration.md index a04409e..695e3a4 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -55,6 +55,7 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, + pause-queue-class: 'is-paused', activate-queue-class: 'is-animating' ); ``` diff --git a/docs/src/configuration.md b/docs/src/configuration.md index 6f2014d..ae9a3f2 100644 --- a/docs/src/configuration.md +++ b/docs/src/configuration.md @@ -58,6 +58,7 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, + pause-queue-class: 'is-paused', activate-queue-class: 'is-animating' ); ``` diff --git a/src/_settings.scss b/src/_settings.scss index a5cc9bf..d9c4eba 100644 --- a/src/_settings.scss +++ b/src/_settings.scss @@ -57,5 +57,6 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, + pause-queue-class: 'is-paused', activate-queue-class: 'is-animating', ) !default; diff --git a/src/util/_series.scss b/src/util/_series.scss index 21b3cac..d459eb4 100644 --- a/src/util/_series.scss +++ b/src/util/_series.scss @@ -46,4 +46,10 @@ $-mui-queue: (); animation-delay: $actual-delay; animation-duration: $duration; } + + // Pause the animation + // This was the behavior before v1.3.0. See https://git.io/motion-ui-97 + .#{map-get($motion-ui-settings, pause-queue-class)} & { + animation-play-state: paused; + } }