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

Question

我有 2 个带有角度材质（浅色和深色）的主题，并希望在我的组件中利用角度动画。我想知道是否有办法将“重音”和“原色”等颜色添加到动画中。

这里有一些代码：

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

棘手，但你可以。

首先，您必须获取主题的 Material 颜色。

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

<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 }}'
            })),
            ...
        ])
    ]