Is there a way to apply a constant CSS style during Angular animation transition?

Question

I would like to apply a constant style to an element during this element's animation's transition. The problem is the default behavior of a transition animates the style as well. For example in this example the red background fades during the animation (it's animated as well):

animations: [
  trigger('animate', [
    state('true', style({ height: '10px' })),
    state('false', style({ height: '30px' })),
    transition('true<=>false', [
      style({ backgroundColor: 'red' }),
      animate('5s'),
    ]),
  ])
]

Here I would like to have the background be constantly red as the height of the element changes. Is there a way to achieve such an effect with Angular animations?

kamov · Accepted Answer · 2021-08-20 07:46:32Z

3

I have found a way to do this with CSS/Sass. You can achieve this effect by using a .ng-animating class selector in CSS.

For example if your animation is targeting a list which has a class .list, you can do:

.list.ng-animating {
  background-color: red;
}

or if nested in SCSS:

.list {
  &.ng-animating {
    background-color: red;
  }
}

answered Aug 20, 2021 at 7:46

kamov

1132 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marghen · Accepted Answer · 2021-08-19 10:40:49Z

0

Why do you want to change the element style instead of adding a class to do that specific function? Add a class like:

.bg-red{
  background-color:red !important;
}

And then remove it when you don't need it anymore. The !important is to avoid whatever is in the style tag to overwrite it.

answered Aug 19, 2021 at 10:40

Marghen

7166 silver badges14 bronze badges

1 Comment

kamov Over a year ago

I would like the red background to only appear while the animation is transitioning between the two states. If I used a class like this, the background would be always red, instead of just during the transition. I also don't think it's possible to manipulate HTML classes from within Angular animations, but I could be wrong.

Collectives™ on Stack Overflow

Is there a way to apply a constant CSS style during Angular animation transition?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related