Javascript 如何在Angular中设置响应div的动画？

我有以下动画：

@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>

---

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

用下面的*代替宽度的数字

@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': '*'}))
          ])
    
      ])
      ]
})

---

嘿，谢谢你的回答！我现在就试试。它确实有效，但在使用*ngIf时我还有最后一个问题。在div扩展到最大高度之前可以看到内容。我怎样才能防止这种行为？是的，问你的问题我从上面更新了我的评论。你知道怎么解决这个问题吗？

@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': '*'}))
          ])
    
      ])
      ]
})