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;
    }
  }
}