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

style(progress): added transition to color change (#3116)

Browse Source
This commit is contained in:
Elad Bezalel
2017-03-10 20:36:09 +02:00
committed by tinayuangao
parent f27617a58b
commit f02af521b9
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/progress-bar/progress-bar.scss
+6 -2
View File
@@ -1,3 +1,5 @@
@import '../core/style/variables';
$mat-progress-bar-height: 5px !default;
$mat-progress-bar-full-animation-duration: 2000ms !default;
$mat-progress-bar-piece-animation-duration: 250ms !default;
@@ -33,7 +35,8 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
// beyond the current value of the primary progress bar.
.mat-progress-bar-buffer {
transform-origin: top left;
transition: transform $mat-progress-bar-piece-animation-duration ease;
transition: transform $mat-progress-bar-piece-animation-duration ease,
stroke $swift-ease-in-duration $ease-in-out-curve-function;
}
// The secondary progress bar is only used in the indeterminate animation, because of this it
@@ -46,7 +49,8 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
.mat-progress-bar-fill {
animation: none;
transform-origin: top left;
transition: transform $mat-progress-bar-piece-animation-duration ease;
transition: transform $mat-progress-bar-piece-animation-duration ease,
stroke $swift-ease-in-duration $ease-in-out-curve-function;
}
// A pseudo element is created for each progress bar bar that fills with the indicator color.
src/lib/progress-spinner/progress-spinner.scss
+1
View File
@@ -35,6 +35,7 @@ $mat-progress-spinner-viewport-size: 100px !default;
// Stroke width of 10px defines stroke as 10% of the viewBox.
stroke-width: $mat-progress-spinner-stroke-width;
transition: stroke $swift-ease-in-duration $ease-in-out-curve-function;
}