时间戳

首页 > 解决方案 > 使用 ng-zorro 和 tabset 的角度高度动画

angular - 使用 ng-zorro 和 tabset 的角度高度动画

问题描述

我想创建具有动画变化高度的 div 并遵循本指南： 动态变化高度的角度动画

不幸的是，它与 ant 的 tabs 模块结合使用，它不会为高度设置动画。

目标是拥有一个具有不同 nz-tab 组件的 nz-tabset 组件。每个组件可能有不同的高度。容器应该平滑地为高度设置动画。

错误的动画GIF

<fx-adjustable-height [trigger]="resizeBox">
  <div #box>
    <nz-tabset nzLinkRouter nzCentered>
      <nz-tab>
        <a *nzTabLink nz-tab-link [routerLink]="['../login']" (click)="onResizeBox()">
          Log in
        </a>
        <fx-login></fx-login>
      </nz-tab>
      <nz-tab>
        <a *nzTabLink nz-tab-link [routerLink]="['../register']" (click)="onResizeBox()">
          Register
        </a>
        <fx-register></fx-register>
      </nz-tab>
    </nz-tabset>
  </div>
</fx-adjustable-height>

fx-adjustable-height 与提供的 Stackoverflow 帖子中的 smoothHeight 组件相同。

我真的很困惑，为什么动画只在这种情况下不起作用。

任何帮助表示赞赏！

标签： angularantdng-zorro-antd

解决方案

推荐阅读