fix(spinner): works in iOS8

fixes #8145
ionic-team · Oct 12, 2016 · a2ffa63 · a2ffa63
1 parent 48c7823
commit a2ffa63
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEn
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
-
+import { CSS } from '../../util/dom';
 /**
  * @name Spinner
  * @description
@@ -232,8 +232,8 @@ const SPINNERS: any = {
         y1: 17,
         y2: 29,
         style: {
-          transform: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)',
-          animationDelay: -(dur - ((dur / total) * index)) + 'ms'
+          [CSS.transform]: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)',
+          [CSS.animationDelay]: -(dur - ((dur / total) * index)) + 'ms'
         }
       };
     }
@@ -247,8 +247,8 @@ const SPINNERS: any = {
         y1: 12,
         y2: 20,
         style: {
-          transform: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)',
-          animationDelay: -(dur - ((dur / total) * index)) + 'ms'
+          [CSS.transform]: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)',
+          [CSS.animationDelay]: -(dur - ((dur / total) * index)) + 'ms'
         }
       };
     }
@@ -263,7 +263,7 @@ const SPINNERS: any = {
         style: {
           top: 9 * Math.sin(2 * Math.PI * index / total),
           left: 9 * Math.cos(2 * Math.PI * index / total),
-          animationDelay: -(dur - ((dur / total) * index)) + 'ms'
+          [CSS.animationDelay]: -(dur - ((dur / total) * index)) + 'ms'
         }
       };
     }
@@ -278,7 +278,7 @@ const SPINNERS: any = {
         style: {
           top: 9 * Math.sin(2 * Math.PI * index / total),
           left: 9 * Math.cos(2 * Math.PI * index / total),
-          animationDelay: -(dur - ((dur / total) * index)) + 'ms'
+          [CSS.animationDelay]: -(dur - ((dur / total) * index)) + 'ms'
         }
       };
     }
@@ -303,7 +303,7 @@ const SPINNERS: any = {
         r: 6,
         style: {
           left: (9 - (9 * index)),
-          animationDelay: -(110 * index) + 'ms'
+          [CSS.animationDelay]: -(110 * index) + 'ms'
         }
       };
     }

diff --git a/src/util/dom.ts b/src/util/dom.ts
@@ -72,6 +72,7 @@ export let CSS: {
   transitionStart?: string,
   transitionEnd?: string,
   transformOrigin?: string
+  animationDelay?: string;
 } = {};
 
 (function() {
@@ -113,6 +114,9 @@ export let CSS: {
 
   // transform origin
   CSS.transformOrigin = (isWebkit ? '-webkit-' : '') + 'transform-origin';
+
+  // animation delay
+  CSS.animationDelay = (isWebkit ? 'webkitAnimationDelay' : 'animationDelay');
 })();