如何在 Angular 中为响应式 div 设置动画？

Question

我有以下动画：

@Component({
  ...
  animations: [
        trigger('fade', [
          transition(':enter', [
              style({'width': '0' }),
              animate(300, style({'width': '?'})) // responsive width here what can I do?
          ]),
          transition(':leave', [
              animate(200, style({'width': '0px'}))
          ])
    
      ])
      ]
})

和html代码：

<div class="detail" *ngIf="hasPost" [@fade]>
    <app-post-detail></app-post-detail>
</div>

所以，我通常想知道当宽度负责或高度未知时如何设置动画，因为在上面的示例中，具有 detail 类的 div 具有不同的宽度大小：

.detail {
    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
    border-left: 1px solid white;
    width: 35%;
    height:100%;
    z-index: 20;
}

@media only screen and (max-width: 700px){
    .detail{
        width: 50%;
    }
    
}

我会在这里做什么？我试图将宽度设置为自动，但动画看起来很糟糕。我必须传递正确的宽度才能使动画正常工作，但如果不知道确切的宽度或不知道高度怎么办？

Answer 1

如下所示，用 * 代替宽度的数字

@Component({
  ...
  animations: [
        trigger('fade', [
          transition(':enter', [
              style({'width': '*' }),
              animate(300, style({'width': '*'})) // responsive width here what can I do?
          ]),
          transition(':leave', [
              animate(200, style({'width': '*'}))
          ])
    
      ])
      ]
})