使用 material 主题颜色制作动画

Question

我有 2 个 angular material 主题（浅色和深色），想在我的组件中利用 angular 动画。我想知道是否有办法将 'accent' 和 'primary' 之类的颜色添加到动画中。

这是一些代码：

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

显然，这不起作用，因为没有 'accent' 或 'primary'。我知道我可以将 css 类与 [ngClass] 结合使用来获得相同的动画，但正如我所说，我想在 angular.

中进行

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

使用 material 主题颜色制作动画

animate with material theme colors

angular-material

angular-material2

angular