javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +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, dur: 1000,
lines: 12, lines: 12,
fn: (dur: number, index: number, total: number) => { fn: (dur: number, index: number, total: number) => {
const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)'; const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`;
const animationDelay = -(dur - ((dur / total) * index)) + 'ms'; const animationDelay = `${ (dur * index / total) - dur }ms`;
return { return {
y1: 17, y1: 17,
y2: 29, y2: 29,
style: { style: {
transform: transform, 'transform': transform,
webkitTransform: transform, 'animation-delay': animationDelay,
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
} }
}; };
} }
@ -25,16 +24,14 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000, dur: 1000,
lines: 12, lines: 12,
fn: (dur: number, index: number, total: number) => { fn: (dur: number, index: number, total: number) => {
const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)'; const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
const animationDelay = -(dur - ((dur / total) * index)) + 'ms'; const animationDelay = `${ (dur * index / total) - dur }ms`;
return { return {
y1: 12, y1: 12,
y2: 20, y2: 20,
style: { style: {
transform: transform, 'transform': transform,
webkitTransform: transform, 'animation-delay': animationDelay,
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
} }
}; };
} }
@ -44,14 +41,14 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000, dur: 1000,
circles: 9, circles: 9,
fn: (dur: number, index: number, total: number) => { 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 { return {
r: 5, r: 5,
style: { style: {
top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px', 'top': `${ 9 * Math.sin(angle) }px`,
left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px', 'left': `${ 9 * Math.cos(angle) }px`,
animationDelay: animationDelay, 'animation-delay': animationDelay,
webkitAnimationDelay: animationDelay
} }
}; };
} }
@ -61,14 +58,15 @@ export const SPINNERS: SpinnerConfigs = {
dur: 1000, dur: 1000,
circles: 8, circles: 8,
fn: (dur: number, index: number, total: number) => { 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 { return {
r: 5, r: 5,
style: { style: {
top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px', 'top': `${ 9 * Math.sin(angle)}px`,
left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px', 'left': `${ 9 * Math.cos(angle) }px`,
animationDelay: animationDelay, 'animation-delay': animationDelay,
webkitAnimationDelay: animationDelay
} }
}; };
} }
@ -93,9 +91,8 @@ export const SPINNERS: SpinnerConfigs = {
return { return {
r: 6, r: 6,
style: { style: {
left: (9 - (9 * index)) + 'px', 'left': `${ 9 - (9 * index)}px`,
animationDelay: animationDelay, 'animation-delay': animationDelay,
webkitAnimationDelay: 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) { function buildCircle(spinner: SpinnerConfig, duration: number, index: number, total: number) {
const data = spinner.fn(duration, index, total); const data = spinner.fn(duration, index, total);
data.style.animationDuration = duration + 'ms'; data.style['animation-duration'] = `${duration}ms`;
return ( return (
<svg viewBox="0 0 64 64" style={data.style}> <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) { function buildLine(spinner: SpinnerConfig, duration: number, index: number, total: number) {
const data = spinner.fn(duration, index, total); const data = spinner.fn(duration, index, total);
data.style.animationDuration = duration + 'ms'; data.style['animation-duration'] = `${duration}ms`;
return ( return (
<svg viewBox="0 0 64 64" style={data.style}> <svg viewBox="0 0 64 64" style={data.style}>