Estoy usando el enlace de clase en un elemento que luego debería cambiar su scaleY() de 1 a 0. Cuando probé la transición con un selector :hover funcionó perfectamente, pero cuando realmente lo pruebo con el enlace de clase, simplemente aparece sin la transición deseada.

Busqué en línea y la mayoría de las preguntas ya respondidas eran sobre el CSS que era incorrecto, como este ejemplo ( las clases adjuntas de clase ng angular no activan la transición css3 ).

Aquí está el código:

filledPortion es una matriz que contiene 10 valores booleanos si se establecen en verdadero, luego agrega la clase filled , ¡lo cual hace! Voy a repetirme, pero Angular agrega/elimina la clase como debería, mi único problema es que omite mi transición (que funciona cuando intenté usarlo con un :hover selector de desplazamiento)

componente.html

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

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