animate progressview with css transitions

sproutcore · Sep 23, 2012 · 5405756 · 5405756
1 parent 8510ef0
commit 5405756
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 18 deletions.
diff --git a/frameworks/desktop/render_delegates/progress.js b/frameworks/desktop/render_delegates/progress.js
@@ -103,23 +103,26 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
 
     context.find('.content').css('width', (value * 100) + "%");
 
-    if (!this._queue[context[0].id]) {
-      this._queue[context[0].id] = {
-        offset:0,
-        element:SC.$(context).find('.content .middle'),
-        shouldAnimate:false
-      };
-    }
+    // fallback for browsers that don't support css transitions
+    if(!SC.platform.supportsCSSTransitions) {
+        if (!this._queue[context[0].id]) {
+          this._queue[context[0].id] = {
+            offset:0,
+            element:SC.$(context).find('.content .middle'),
+            shouldAnimate:false
+          };
+        }
 
-    if (isIndeterminate && isRunning && isVisibleInWindow) {
-      // save offset in the queue and request animation
-      this._queue[context[0].id].shouldAnimate = true;
-      this.animate(dataSource);
-    } else if (!isIndeterminate) {
-      // Clear out our custom background-position when isIndeterminate toggles.
-      this._queue[context[0].id].element.css('background-position', '');
-    } else {
-      this._queue[context[0].id].shouldAnimate = false;
+        if (isIndeterminate && isRunning && isVisibleInWindow) {
+          // save offset in the queue and request animation
+          this._queue[context[0].id].shouldAnimate = true;
+          this.animate(dataSource);
+        } else if (!isIndeterminate) {
+          // Clear out our custom background-position when isIndeterminate toggles.
+          this._queue[context[0].id].element.css('background-position', '');
+        } else {
+          this._queue[context[0].id].shouldAnimate = false;
+        }
     }
   },
 

diff --git a/frameworks/desktop/tests/views/progress/ui.js b/frameworks/desktop/tests/views/progress/ui.js
@@ -295,7 +295,11 @@ test("on indeterminate state animation respects start,stop", function() {
         ok(view.$().hasClass('running'), 'should have running class');
 
         var newBgPos = view.$('.content .middle').css('background-position');
-        ok(!(currentBgPos === newBgPos), 'bg pos should have changed (old was '+currentBgPos+' new is: '+newBgPos+')');
+        if(SC.platform.supportsCSSTransitions) {
+            ok((currentBgPos === newBgPos), 'bg pos should NOT have changed on platforms that support css transitions (old was '+currentBgPos+' new is: '+newBgPos+')');
+        } else {
+            ok(!(currentBgPos === newBgPos), 'bg pos should have changed (old was '+currentBgPos+' new is: '+newBgPos+')');
+        }
 
         SC.RunLoop.begin();
         view.set('isRunning', NO);

diff --git a/themes/ace/resources/progress/ace/progress.css b/themes/ace/resources/progress/ace/progress.css
@@ -1,3 +1,5 @@
+$indeterminate_anim_duration: 1s;
+
 $theme.progress {
   border: 0px none;
   .track {
@@ -22,11 +24,53 @@ $theme.progress {
 
   &.indeterminate {
 
-   /* Because the middle image is so wide, it adds a lot of wasted space if part
+    /* Because the middle image is so wide, it adds a lot of wasted space if part
       of the repeating sprite, so include it separately. */
     .content {
       .middle {
         background: sc_static("progress_view_indeterminate_content.png") repeat-x;
+          -webkit-animation-name: _sc_progressview_indeterminate;
+          -webkit-animation-duration:$indeterminate_anim_duration;
+          -webkit-animation-direction: normal;
+          -webkit-animation-timing-function:linear;
+          -webkit-animation-play-state:paused;
+          -webkit-animation-iteration-count: infinite;
+          -moz-animation-name: _sc_progressview_indeterminate;
+          -moz-animation-duration:$indeterminate_anim_duration;
+          -moz-animation-direction: normal;
+          -moz-animation-timing-function:linear;
+          -moz-animation-play-state:paused;
+          -moz-animation-iteration-count: infinite;
+          -ms-animation-name: _sc_progressview_indeterminate;
+          -ms-animation-duration:$indeterminate_anim_duration;
+          -ms-animation-direction: normal;
+          -ms-animation-timing-function:linear;
+          -ms-animation-play-state:paused;
+          -ms-animation-iteration-count: infinite;
+          -o-animation-name: _sc_progressview_indeterminate;
+          -o-animation-duration:$indeterminate_anim_duration;
+          -o-animation-direction: normal;
+          -o-animation-timing-function:linear;
+          -o-animation-play-state:paused;
+          -o-animation-iteration-count: infinite;
+          animation-name: _sc_progressview_indeterminate;
+          animation-duration:$indeterminate_anim_duration;
+          animation-direction: normal;
+          animation-timing-function:linear;
+          animation-play-state:paused;
+          animation-iteration-count: infinite;
+      }
+    }
+
+    &.running {
+      .content {
+        .middle {
+            -webkit-animation-play-state:running;
+            -moz-animation-play-state:running;
+            -ms-animation-play-state:running;
+            -o-animation-play-state:running;
+            animation-play-state:running;
+        }
       }
     }
   }
@@ -35,3 +79,49 @@ $theme.progress {
     opacity: .5;
   }
 }
+
+
+@-webkit-keyframes _sc_progressview_indeterminate {
+    0% {
+        background-position:0px 0px;
+    }
+    100% {
+        background-position:42px 0px;
+    }
+}
+
+@-moz-keyframes _sc_progressview_indeterminate {
+    0% {
+        background-position:0px 0px;
+    }
+    100% {
+        background-position:42px 0px;
+    }
+}
+
+@-ms-keyframes _sc_progressview_indeterminate {
+    0% {
+        background-position:0px 0px;
+    }
+    100% {
+        background-position:42px 0px;
+    }
+}
+
+@-o-keyframes _sc_progressview_indeterminate {
+    0% {
+        background-position:0px 0px;
+    }
+    100% {
+        background-position:42px 0px;
+    }
+}
+
+@keyframes _sc_progressview_indeterminate {
+    0% {
+        background-position:0px 0px;
+    }
+    100% {
+        background-position:42px 0px;
+    }
+}