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

棘手的，但是可以。

首先，您必须获取主题的“材质”颜色。

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

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

用主题颜色设置动画

1 个答案: