javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(spinner): works in iOS8

Browse Source 
fixes #8145
This commit is contained in:
Manu Mtz.-Almeida
2016-10-12 21:33:48 +02:00
parent 48c7823d2f
commit a2ffa63fd1
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/spinner/spinner.ts
View File

@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEn
import { Config } from '../../config/config'; import { Config } from '../../config/config';
import { Ion } from '../ion'; import { Ion } from '../ion';
import { CSS } from '../../util/dom';
/** /**
* @name Spinner * @name Spinner
* @description * @description
@ -232,8 +232,8 @@ const SPINNERS: any = {
y1: 17, y1: 17,
y2: 29, y2: 29,
style: { style: {
transform: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)', [CSS.transform]: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)',
animationDelay: -(dur - ((dur / total) * index)) + 'ms' [CSS.animationDelay]: -(dur - ((dur / total) * index)) + 'ms'
} }
}; };
} }
@ -247,8 +247,8 @@ const SPINNERS: any = {
y1: 12, y1: 12,
y2: 20, y2: 20,
style: { style: {
transform: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)', [CSS.transform]: 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)',
animationDelay: -(dur - ((dur / total) * index)) + 'ms' [CSS.animationDelay]: -(dur - ((dur / total) * index)) + 'ms'
} }
}; };
} }
@ -263,7 +263,7 @@ const SPINNERS: any = {
style: { style: {
top: 9 * Math.sin(2 * Math.PI * index / total), top: 9 * Math.sin(2 * Math.PI * index / total),
left: 9 * Math.cos(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: { style: {
top: 9 * Math.sin(2 * Math.PI * index / total), top: 9 * Math.sin(2 * Math.PI * index / total),
left: 9 * Math.cos(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, r: 6,
style: { style: {
left: (9 - (9 * index)), left: (9 - (9 * index)),
animationDelay: -(110 * index) + 'ms' [CSS.animationDelay]: -(110 * index) + 'ms'
} }
}; };
} }

4
src/util/dom.ts
View File

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