Question

我有一个在进入和离开时动画的组件。这些转换之一将背景色更改为原色，但我目前已对其进行了硬编码。

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）中的元素背景颜色设置为动画颜色，并立即对其进行动画处理？我担心这种情况会严重恶化，尤其是如果我后来决定放入动画或其他东西的切换开关时。

Answer 1

在SCSS / CSS中创建2个类...使用[ngClass]将应用的类更改为组件。

前面也问过类似的问题：Bootstrap 4 dark & light mode switch

如何在组件的动画中利用自定义主题的颜色？

1 个答案: