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

Posted 2023-03-13

【中文标题】如何在 Angular 中为响应式 div 设置动画？

【英文标题】：How to animate responsive div in Angular?

【发布时间】：2021-02-05 14:08:44

【问题描述】：

我有以下动画：

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

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

【参考方案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': '*'))
          ])
    
      ])
      ]
)

【讨论】：

您好，谢谢您的回答！我马上试试。

它确实有效，但我在使用 *ngIf 时有最后一个问题。在 div 展开到最大高度之前可以看到内容。如何防止这种行为？

是的，问你的问题

我从上面更新了我的评论。你知道如何解决这个问题吗？