fix transition delay not being applied correct

glen-cheney · Apr 20, 2016 · 95c49ed · 95c49ed
1 parent 871879b
commit 95c49ed
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 55 deletions.
diff --git a/_scss/shuffle-styles.scss b/_scss/shuffle-styles.scss
@@ -75,7 +75,7 @@ $itemHeight: 220px;
     }
   }
 
-  @supports (filter: blur(1px)) {
+  @supports (filter: blur(1px)) and (clip-path: inset(0 0 0 0)) {
 
     .picture-item--overlay {
 

diff --git a/css/shuffle-styles.css b/css/shuffle-styles.css
@@ -53,7 +53,7 @@
     overflow: hidden; }
   .picture-item--overlay .picture-item__description {
     display: none; }
-  @supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) {
+  @supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) and ((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))) {
     .picture-item--overlay .picture-item__blur {
       position: absolute;
       z-index: 1;

diff --git a/dist/shuffle.js b/dist/shuffle.js
diff --git a/dist/shuffle.js.map b/dist/shuffle.js.map
diff --git a/dist/shuffle.min.js b/dist/shuffle.min.js
diff --git a/dist/shuffle.min.js.map b/dist/shuffle.min.js.map
diff --git a/src/shuffle.js b/src/shuffle.js
@@ -497,6 +497,7 @@ class Shuffle {
       var pos = this._getItemPosition(itemSize);
 
       function callback() {
+        item.element.style.transitionDelay = '';
         item.applyCss(ShuffleItem.Css.VISIBLE.after);
       }
 
@@ -510,8 +511,10 @@ class Shuffle {
       item.point = pos;
       item.scale = ShuffleItem.Scale.VISIBLE;
 
-      let styles = ShuffleItem.Css.VISIBLE.before;
-      styles.transitionDelay = this._getStaggerAmount(count);
+      // Use xtend here to clone the object so that the `before` object isn't
+      // modified when the transition delay is added.
+      let styles = xtend(ShuffleItem.Css.VISIBLE.before);
+      styles.transitionDelay = this._getStaggerAmount(count) + 'ms';
 
       this._queue.push({
         item,
@@ -565,8 +568,8 @@ class Shuffle {
 
       item.scale = ShuffleItem.Scale.HIDDEN;
 
-      let styles = ShuffleItem.Css.HIDDEN.before;
-      styles.transitionDelay = this._getStaggerAmount(count);
+      let styles = xtend(ShuffleItem.Css.HIDDEN.before);
+      styles.transitionDelay = this._getStaggerAmount(count) + 'ms';
 
       this._queue.push({
         item,
@@ -632,7 +635,6 @@ class Shuffle {
    */
   _whenTransitionDone(element, itemCallback, done) {
     let id = onTransitionEnd(element, (evt) => {
-      evt.currentTarget.style.transitionDelay = '';
       itemCallback();
       done(null, evt);
     });
@@ -664,22 +666,14 @@ class Shuffle {
     }
 
     let hasSpeed = this.options.speed > 0;
+    let hasQueue = this._queue.length > 0;
 
-    // Iterate over the queue and keep track of ones that use transitions.
-    let immediates = [];
-    let transitions = [];
-    this._queue.forEach((obj) => {
-      if (this.isInitialized && hasSpeed) {
-        transitions.push(obj);
-      } else {
-        immediates.push(obj);
-      }
-    });
+    if (hasQueue && hasSpeed && this.isInitialized) {
+      this._startTransitions(this._queue);
 
-    this._styleImmediately(immediates);
-
-    if (transitions.length > 0) {
-      this._startTransitions(transitions);
+    } else if (hasQueue) {
+      this._styleImmediately(this._queue);
+      this._dispatchLayout();
 
     // A call to layout happened, but none of the newly visible items will
     // change position or the transition duration is zero, which will not trigger
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,7 @@ $itemHeight: 220px; @@
         }
       }
-      @supports (filter: blur(1px)) {
+      @supports (filter: blur(1px)) and (clip-path: inset(0 0 0 0)) {
         .picture-item--overlay {
@@ Expand Down @@