使用材质主题颜色制作动画

Question

我有两个角度材质（光明和黑暗）的主题，并希望在我的组件中利用角度动画。我想知道是否有办法在动画中获得“重音”和“主要”等颜色。

这是一些代码：

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')
            ])
        ])
    ]

显然，这不起作用，因为没有'重音'或'主要'。我知道我可以将css类与[ngClass]结合使用来获得相同的动画，但就像我说我想用角度来做。

Answer 1

整蛊，但你可以。

首先，您必须获得主题的材质颜色。

创建一个简单的组件并设置其颜色。

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

现在，您可以在动画参数中使用引用：

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

现在，您可以在动画中使用参数：

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