是否有可能为mat-tree（Angular Material）添加动画效果？

Question

我正在使用来自Angular材料的mat-tree (https://material.angular.io/components/tree/overview)。当展开父树节点时，我想要动画出现和消失子树节点。以下是我想要的动画示例：

我知道Angular提供了动画功能，但我还没找到如何为mat-tree添加动画的方法。是否有可能为Angular Material的mat-tree添加动画效果？或者我必须编写自己的树形菜单，才能实现这种动画效果？

- Etoon

---

也许你应该在 Material Repo 上开一个问题，请求在 cdk 中添加这个功能。 - julianobrasil

@jpavel，用Angular很容易实现，而且你可以选择喜欢的动画效果。个人认为，如果这是一个特性的话，会使组件变得不必要地复杂。 - Eliseo

Answer 1

按照已接受答案中的方法来使用子节点垂直滑入/滑出的动画，您可以使用嵌套树。 Stackblitz

将动画添加到组件中：

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

- JayChase

---

非常好！它也适用于Angular和Material v15。 - Chen Peleg

Answer 2

只需在标签 mat-tree-node 上添加动画效果，你的动画可以是以下方式之一：

 animations: [

    trigger('simpleFade', [
      transition(':enter', [
        style({ opacity:0 }),
        animate(350)
      ])])]

但如果您不想为主树添加动画效果，您可以使用以下方式之一：

 animations: [

    trigger('simpleFade', [
      transition('*=>1', [
        style({ opacity:0 }),
        animate(350)
      ])])]

然后您可以使用[@simpleFade]="node.level?1:0"

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!--see that you only want the animation when becomes 1, so check the level-->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding 
                      [@simpleFade]="node.level?1:0">
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>
<!--see that you only want the animation when becomes 1, so check the level-->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding 
                       [@simpleFade]="node.level?1:0">
    <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}}
  </mat-tree-node>
</mat-tree>

请查看 stackblitz

- Eliseo

---

如果有人想要通过使用子节点垂直滑入/滑出的动画来实现此操作，则可以使用嵌套树以相同的方式完成。Stackblitz链接 - JayChase

@JayChase，干得好（我喜欢你的比我的好多了），你能写一个带有代码的答案吗？ - Eliseo