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

fix(spinner): style CSS props

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-07-12 11:46:04 +02:00
parent 92e32d8cd9
commit 2798bb083f
2 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
core/src/components/spinner/spinner-configs.ts
View File

@ -6,16 +6,15 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000,
lines: 12,
fn: (dur: number, index: number, total: number) => {
const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)';
const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`;
const animationDelay = `${ (dur * index / total) - dur }ms`;
return {
y1: 17,
y2: 29,
style: {
transform: transform,
webkitTransform: transform,
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
'transform': transform,
'animation-delay': animationDelay,
}
};
}
@ -25,16 +24,14 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000,
lines: 12,
fn: (dur: number, index: number, total: number) => {
const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)';
const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
const animationDelay = `${ (dur * index / total) - dur }ms`;
return {
y1: 12,
y2: 20,
style: {
transform: transform,
webkitTransform: transform,
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
'transform': transform,
'animation-delay': animationDelay,
}
};
}
@ -44,14 +41,14 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000,
circles: 9,
fn: (dur: number, index: number, total: number) => {
const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
const animationDelay = `${ (dur * index / total) - dur }ms`;
const angle = 2 * Math.PI * index / total;
return {
r: 5,
style: {
top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px',
left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px',
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
'top': `${ 9 * Math.sin(angle) }px`,
'left': `${ 9 * Math.cos(angle) }px`,
'animation-delay': animationDelay,
}
};
}
@ -61,14 +58,15 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000,
circles: 8,
fn: (dur: number, index: number, total: number) => {
const animationDelay = -(dur - ((dur / total) * index)) + 'ms';
const step = index / total;
const animationDelay = `${(dur * step) - dur}ms`;
const angle = 2 * Math.PI * step;
return {
r: 5,
style: {
top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px',
left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px',
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
'top': `${ 9 * Math.sin(angle)}px`,
'left': `${ 9 * Math.cos(angle) }px`,
'animation-delay': animationDelay,
}
};
}
@ -93,9 +91,8 @@ export const SPINNERS: SpinnerConfigs = {
return {
r: 6,
style: {
left: (9 - (9 * index)) + 'px',
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
'left': `${ 9 - (9 * index)}px`,
'animation-delay': animationDelay,
}
};
}

4
core/src/components/spinner/spinner.tsx
View File

@ -103,7 +103,7 @@ export class Spinner {
function buildCircle(spinner: SpinnerConfig, duration: number, index: number, total: number) {
const data = spinner.fn(duration, index, total);
data.style.animationDuration = duration + 'ms';
data.style['animation-duration'] = `${duration}ms`;
return (
<svg viewBox="0 0 64 64" style={data.style}>
@ -115,7 +115,7 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
function buildLine(spinner: SpinnerConfig, duration: number, index: number, total: number) {
const data = spinner.fn(duration, index, total);
data.style.animationDuration = duration + 'ms';
data.style['animation-duration'] = `${duration}ms`;
return (
<svg viewBox="0 0 64 64" style={data.style}>