Question

我有一个密码检查器，并且角度弹性布局的网格适用于它，但是如果我要转换则不行。如果全部转换，所有内容将变成一列。

<div #passwordChecker class="password-checker" style="height:0;"
               gdAreas="lower upper | special length | number match"
               gdGap="15px" gdRows="auto auto auto">
            <mat-error gdArea="lower"></mat-error>
            <mat-error gdArea="upper"></mat-error>
            <mat-error gdArea="special"></mat-error>
            <mat-error gdArea="length"></mat-error>
            <mat-error gdArea="number"></mat-error>
            <mat-error gdArea="match"></mat-error>

scss

.password-checker {
  font-size: .7rem;
  overflow: hidden;
  transition: height 0.25s ease-in;
  width: 336px;
  mat-error {
    @extend .flex-vertical-center;
    color: var(--gray-700);
    i {
      margin: 0 .5rem 0 0;
    }
  }
}

和用于过渡的javascript

@ViewChild('passwordChecker') passCheck: ElementRef;
showPasswordValidator() {
    this.passCheck.nativeElement.style = 'height: 5rem;';
  }

我尝试过使用常规div，我尝试过以一种或另一种方式（例如，更改宽度和高度）更改几乎所有css属性。如果我删除元素内样式属性，则网格似乎可以正常工作，并且按预期显示，但是一旦激活javascript以调整其大小以进行过渡，它就会变成一列，并且永远无法修复。

有想法吗？

过渡破坏了角度弯曲布局网格

0 个答案: