用主题颜色设置动画

Question

I got 2 themes with angular material (light & dark) and want to leverage angular animations in my component. I was wondering if there was a way to get colors like 'accent' and 'primary' into the animations.

Here's some code:

animations: [
        trigger('ClickLike', [
            state('idle', style({
                opacity: 1,
                color: 'primary'
            })),
            state('clicking', style({
                opacity: 0.2,
                color: 'accent'
            })),
            transition('idle => clicking', [
                animate('200ms')
            ]),
            transition('clicking => idle', [
                animate('150ms')
            ])
        ])
    ]

Obviously, this isn't working, because there's no 'accent' or 'primary'. I know I can just use css classes in combination with [ngClass] to get the same animation, but like I said I want to do it in angular.

Answer 1

Tricky, but you can.

First, you have to get the Material color of your themes.

Create a simple component and set its color.

<button #matColorRefBtn color="primary" mat-raised-button [style.display]="'none'"></button>

Now, you can use the reference in an animation param :

<div [@ClickLike]="{ value: yourValueForTheAnimation, params: {primaryColor: matColorRefBtn.style.backgroundColor }}"></div>

Now, you can use the param in your animation :

animations: [
        trigger('ClickLike', [
            state('idle', style({
                opacity: 1,
                color: '{{ primaryColor }}'
            })),
            ...
        ])
    ]