fix(snack-bar): add content fade in animation #7504
Conversation
Adds a subtle fade in animation to the snack bar content. Fixes angular#7502.
googlebot
added
the
cla: yes
| @@ -23,7 +24,15 @@ import {MAT_SNACK_BAR_DATA} from './snack-bar-config'; | |||
| encapsulation: ViewEncapsulation.None, | |||
| preserveWhitespaces: false, | |||
| changeDetection: ChangeDetectionStrategy.OnPush, | |||
| animations: [ | |||
| trigger('contentFade', [ | |||
| state('void', style({opacity: '0'})), | |||
There was a problem hiding this comment.
I think you can just use :enter instead of having to manage states.
| trigger('contentFade', [ | ||
| state('void', style({opacity: '0'})), | ||
| state('visible', style({opacity: '1'})), | ||
| transition('void => visible', animate('350ms linear')) |
There was a problem hiding this comment.
Should we use the animations from core?
`${AnimationCurves.STANDARD_CURVE} ${AnimationDurations.ENTERING}`
There was a problem hiding this comment.
Does that work now with AOT? I thought string interpolation in animation broke it.
There was a problem hiding this comment.
That comment is pretty old. It seems to work with AoT now.
|
Addressed the feedback @josephperrott, PTAL. One note: I'm not too sure about using the |
|
Yeah, what we likely would like to do is delay the start of the animation by ~100ms so that it times better, but I think that increasing the overall length will work just as well. |
josephperrott
added
pr: lgtm
action: merge
|
@crisbeto Linter? |
|
Fixed. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Adds a subtle fade in animation to the snack bar content.
Fixes #7502.