时间戳

首页 > 解决方案 > 是否可以为 mat-tree 设置动画？（角材料）

angular - 是否可以为 mat-tree 设置动画？（角材料）

问题描述

我正在使用来自 Angular Materials的 mat-tree ( https://material.angular.io/components/tree/overview )。扩展父树节点时，我想为子树节点的外观和消失设置动画。这是我希望动画如何的示例：

树动画

我知道 Angular 提供了动画功能，但我不知道如何为 mat-tree 设置动画。

是否可以为 Angular Material 的 mat-tree 设置动画？或者如果我想要那种动画，我是否被迫编写自己的树形菜单？

标签： angulartreeangular-materialangular-animations

解决方案

按照接受的答案中的方法使用垂直滑入/滑出的子节点的动画来执行此操作，您可以使用嵌套树。堆栈闪电战

将动画添加到组件中：

  @Component({
    selector: 'tree-nested-overview-example',
    templateUrl: 'tree-nested-overview-example.html',
    styleUrls: ['tree-nested-overview-example.css'],
    animations:[
          trigger('slideVertical', [
        state(
          '*',
          style({
            height: 0
          })
        ),
        state(
          'show',
          style({
            height: '*'
          })
        ),
        transition('* => *', [animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')])
      ])
    ]
  })

将动画应用于包含子节点的元素：

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
  <li>
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.name}}
    </div>
    <ul  [@slideVertical]="treeControl.isExpanded(node) ? 'show' : null">
      <ng-container matTreeNodeOutlet></ng-container>
    </ul>
  </li>
</mat-nested-tree-node>

隐藏元素上的溢出：

.example-tree ul {
  overflow: hidden;
}

推荐阅读