анимировать с материальными цветами темы - PullRequest
Новая
       7

анимировать с материальными цветами темы

0 голосов
/ 15 февраля 2019

Я получил 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], чтобы получить ту же анимацию, но, как я уже сказал, я хочу сделать это под углом.

1 Ответ

0 голосов
/ 15 февраля 2019

сложно, но вы можете.

Сначала вы должны получить цвет материала ваших тем.

Создайте простой компонент и установите его цвет.

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