我在一个元素上使用类绑定，然后它的scaleY（）应该从1变为0。当我尝试使用:hover选择器进行转换时，它工作得很好，但当我实际使用类绑定时，它只是弹出而没有期望的转换。
我在网上看了看，大多数已经回答的问题都是关于CSS不正确的，比如这个例子（angular ng-class appending classes does not trigger css3 transition）。
代码如下：
filledPortion是一个包含10个布尔值的数组，如果它们被设置为true，那么它会添加filled类，它确实这样做了！我要重复一遍，但是Angular确实添加/删除了类，因为它应该这样做，我唯一的问题是它跳过了我的转换（当我尝试使用:hover选择器时，它是有效的）
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;
    }
  }
}

型