Angular 14 Class binding transition is not triggering

Question

I'm using class binding on an element which then should have its scaleY() change from 1 to 0. When I tried the transition with a :hover selector it worked perfectly but when I actually try it with class binding it just pops off without the desired transition.

I looked online and most of the already answered question were about the CSS that was incorrect such as this example (angular ng-class appending classes does not trigger css3 transition).

Here's the code :

filledPortionis an array containing 10 booleans if they're set to true then it adds the filled class, which it does ! I'm gonna repeat myself but Angular does add/remove the class as it should my only problem is that it skips my transition (which is working when I tried using it with an :hover selector)

component.html

    <div class="bar" [class.end]="typeEnd">
   <span *ngFor="let portion of filledPortion; let i = index" class="portion" [class.filled]="portion"></span> 
</div>

component.scss

.bar {
  .portion {
    position: relative;
    width: 2rem;
    height: 1.5rem;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: bottom;
      transform: scaleY(0);
      background-color: var(--red);
      transition: transform .250s cubic-bezier(0.4, 0.0, 0.2, 1);
      z-index: 1;
    }
    &.filled::before {
      transform: scaleY(1);
    }
  }
}

.end {
  .portion {
    &::before , &::after {
      background-color: #fff;
    }
  }
}

Soheil · Answer 1 · 2023-08-05T11:43:36.193

I know it is too late to answer this question, but maybe it helps others who view it later.

Short Answer The reason is you have used transition inside ngFor.

Solution: You should use Angular Animation

Detailed Answer:

The reason can be understood when you have a clearer understanding of how ngFor works in Angular. Technically when the state of items of the loop changes (in your case the span with portion class), Angular removes the previous span, recreates the span with new conditions, and adds it to the dom. (For more technical details, you can check How is Angular's ngFor implemented?).

Therefore, the browsers, render the item with new styles and this is going to be an instant of change from human views. This behavior can be counted wrongly as the transition is not working, however, the transition might work if the class would be added to the same dom. But, unfortunately, that is not the case here. You can simply add/remove the class manually to the dom via developer tools of the browser. You would see the transition you are expecting works.

Conclusion:

So the problem is not Angular, its Class Binding or transition. The transition setup is correct but since changes are not affecting the same dom, transition animation can not be implemented by the browser's engine. Hence, Angular has introduced BrowserAnimationsModule that can full fill your requirement.

Angular 14 Class binding transition is not triggering

1 Answers1