skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(progress spinner) : fix flickering animation (#9833)

Browse Source
This commit is contained in:
michael theodorides
2018-02-18 02:40:15 +02:00
committed by Jeremy Elbourn
parent 06b401774b
commit ea3a01e7f1
2 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/progress-spinner/progress-spinner.scss
+14 -7
View File
@@ -69,24 +69,31 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
stylelint-disable declaration-block-single-line-max-declarations,
declaration-block-semicolon-space-after
*/
// .0001 percentage difference is necessary in order to avoid unwanted animation frames
// for example because the animation duration is 4 seconds, .1% accounts to 4ms
// which are enough to see the flicker described in
// https://github.com/angular/material2/issues/8984
//
// NOTE: this is replaced by js for any diameter other that 100
0% { stroke-dashoffset: $start; transform: rotate(0); }
12.5% { stroke-dashoffset: $end; transform: rotate(0); }
12.51% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(72.5deg); }
12.5001% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(72.5deg); }
25% { stroke-dashoffset: $start; transform: rotateX(180deg) rotate(72.5deg); }
25.1% { stroke-dashoffset: $start; transform: rotate(270deg); }
25.0001% { stroke-dashoffset: $start; transform: rotate(270deg); }
37.5% { stroke-dashoffset: $end; transform: rotate(270deg); }
37.51% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(161.5deg); }
37.5001% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(161.5deg); }
50% { stroke-dashoffset: $start; transform: rotateX(180deg) rotate(161.5deg); }
50.01% { stroke-dashoffset: $start; transform: rotate(180deg); }
50.0001% { stroke-dashoffset: $start; transform: rotate(180deg); }
62.5% { stroke-dashoffset: $end; transform: rotate(180deg); }
62.51% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(251.5deg); }
62.5001% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(251.5deg); }
75% { stroke-dashoffset: $start; transform: rotateX(180deg) rotate(251.5deg); }
75.01% { stroke-dashoffset: $start; transform: rotate(90deg); }
75.0001% { stroke-dashoffset: $start; transform: rotate(90deg); }
87.5% { stroke-dashoffset: $end; transform: rotate(90deg); }
87.51% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(341.5deg); }
87.5001% { stroke-dashoffset: $end; transform: rotateX(180deg) rotate(341.5deg); }
100% { stroke-dashoffset: $start; transform: rotateX(180deg) rotate(341.5deg); }
// stylelint-enable
}
src/lib/progress-spinner/progress-spinner.ts
+11 -7
View File
@@ -44,26 +44,30 @@ export class MatProgressSpinnerBase {
}
export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary');
// .0001 percentage difference is necessary in order to avoid unwanted animation frames
// for example because the animation duration is 4 seconds, .1% accounts to 4ms
// which are enough to see the flicker described in
// https://github.com/angular/material2/issues/8984
const INDETERMINATE_ANIMATION_TEMPLATE = `
@keyframes mat-progress-spinner-stroke-rotate-DIAMETER {
0% { stroke-dashoffset: START_VALUE; transform: rotate(0); }
12.5% { stroke-dashoffset: END_VALUE; transform: rotate(0); }
12.51% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(72.5deg); }
12.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(72.5deg); }
25% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(72.5deg); }
25.1% { stroke-dashoffset: START_VALUE; transform: rotate(270deg); }
25.0001% { stroke-dashoffset: START_VALUE; transform: rotate(270deg); }
37.5% { stroke-dashoffset: END_VALUE; transform: rotate(270deg); }
37.51% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(161.5deg); }
37.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(161.5deg); }
50% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(161.5deg); }
50.01% { stroke-dashoffset: START_VALUE; transform: rotate(180deg); }
50.0001% { stroke-dashoffset: START_VALUE; transform: rotate(180deg); }
62.5% { stroke-dashoffset: END_VALUE; transform: rotate(180deg); }
62.51% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(251.5deg); }
62.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(251.5deg); }
75% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(251.5deg); }
75.01% { stroke-dashoffset: START_VALUE; transform: rotate(90deg); }
75.0001% { stroke-dashoffset: START_VALUE; transform: rotate(90deg); }
87.5% { stroke-dashoffset: END_VALUE; transform: rotate(90deg); }
87.51% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(341.5deg); }
87.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(341.5deg); }
100% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(341.5deg); }
}
`;