Is it possible to animate mat-tree? (Angular Material)

Question

I am using mat-tree (https://material.angular.io/components/tree/overview) from Angular Materials. When expanding a parent-tree-node, I want to animate the appearance and disappearance of the child-tree-nodes. Here is an example of how I would like the animation to be:

tree animation

I know that Angular is offering a feature for animations, but yet I couldn't find out how to animate mat-tree.

Is it possible to animate mat-tree of Angular Material? Or am I forced to code my own tree-menu if I want that kind of animation?

Maybe you should open an issue on [Material Repo](https://github.com/angular/components) asking for this feature in cdk. — julianobrasil, Aug 27 '19 at 10:56
@jpavel, it's easy make in Angular, and you can choose what animation you want. Personally I think that if was a feature, it's make innecesary complex the component — Eliseo, Aug 27 '19 at 11:41

score 12 · Answer 1 · answered Apr 16 '20 at 23:18

Following the method in the accepted answer to do this with an animation of the child nodes sliding in/out vertically you can use a nested tree. Stackblitz

Add the animation to the component:

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

Apply the animation to the element containing the child nodes:

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

Hide the overflow on the element:

.example-tree ul {
  overflow: hidden;
}

Very good! works also on angular & material v15 – Chen Peleg May 16 '23 at 06:17 — Chen Peleg, May 16 '23 at 06:17

score 8 · Accepted Answer · answered Aug 27 '19 at 11:34

it's just add animation to the tag mat-tree-node your animation can be like

 animations: [

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

But if you don't want animate the main tree, you must use some like

 animations: [

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

then you use [@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>

See stackblitz

If anyone is looking for how to do this with an animation of the child nodes sliding in/out vertically it can be done in the same way but using the nested tree. [Stackblitz here](https://stackblitz.com/edit/ng-material-tree-nested-animated?file=src/app/tree-nested-overview-example.html) — JayChase, Apr 15 '20 at 07:42
@JayChase, good job (I like much more than mine), can you write an answer with the code? — Eliseo, Apr 15 '20 at 09:26

Is it possible to animate mat-tree? (Angular Material)

2 Answers2