2

I have a component that animates on enter and leave. One of these transitions changes the background color to the primary color, but I currently have it hard-coded.

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

I'd like to avoid hard-coding the color and instead do something like this

background: 'primary'

or

background: MyTheme.colors.primary

What's the proper convention here? Do I need to just set the element's background color in the component's css (or, in this case, scss) to the animation color and just animate it away instantly? I'm worried that would degrade horribly, especially if I later decide to put in a toggle for animations or something.

Jeff Hobson
  • 88
  • 7
  • Did you try: https://stackoverflow.com/questions/47122833/animating-with-variables-angular-4 – Kevin Dec 17 '18 at 03:20

1 Answers1

0

create 2 classes in your SCSS/CSS... use [ngClass] to change the applied class to your component.

similar question was asked earlier too: Bootstrap 4 dark & light mode switch

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70