Как я могу использовать цвета моей пользовательской темы в анимации компонента? - PullRequest
Новая
       21

Как я могу использовать цвета моей пользовательской темы в анимации компонента?

0 голосов
/ 17 декабря 2018

У меня есть компонент, который оживляет при входе и выходе.Один из этих переходов меняет цвет фона на основной, но в настоящее время он жестко задан. 

animations: [
    trigger('fadeInOut', [
        state('in', style({ opacity: 1, background: 'transparent' })),
        transition(':enter', [
            style({
                background: '#1976d2' // Primary theme color
            }),
            animate('0.5s ease-in-out')
        ]),
        transition(':leave', [
            animate('0.3s ease-out', style({ opacity: 0 }))
        ])
    ])
]

Я бы хотел избежать жесткого кодирования цвета и вместо этого сделать что-то подобное 

background: 'primary'

или 

background: MyTheme.colors.primary

Какое здесь соглашение?Нужно ли просто установить цвет фона элемента в css (или, в данном случае, scss) компонента на цвет анимации и просто мгновенно его анимировать?Я боюсь, что это ужасно ухудшится, особенно если я позже решу включить переключатель для анимации или чего-то еще.

1 Ответ

0 голосов
/ 17 декабря 2018

Создайте 2 класса в вашем SCSS / CSS ... используйте [ngClass], чтобы изменить примененный класс на ваш компонент.

Аналогичный вопрос задавался и ранее: Переключатель Bootstrap 4 dark & ​​light mode

...