title: How to do a fadeOut Animation with Angular Animation in mat-tree before the tree's datasource changes
body: <p>I couldn't find any source so far that could help me with my specific problem, therefore I am hoping to find some help here. It's quite a lot to read, therefore I am thankful for any hint.</p>
  
  <hr>
  
  <p>I have a mat-tree list (from Angular Material) where I can't use the ":leave" to animate a fadeOut, due to the whole list being loaded newly after a change happens. 
  Here is some code to explain:
  Once I get new data, I call subscribe on my <strong>dataSource</strong>:</p>
  
  <pre><code>this.dataSource._flattenedData.subscribe(value =&gt; {
    this.childNodesToAnimateFadeIn = [];
    this.childNodesToAnimateFadeOut = [];
    this.getNewListItems(this.previousStatusOfList, value);
    this.previousStatusOfList = value;
  });
  </code></pre>
  
  <p>I use <strong>getNewListItems()</strong> to decide which elements of the <strong>mat-tree</strong> have to fade in and which to fade out:</p>
  
  <pre><code>    getNewListItems(oldStatusOfList: FileFlatNode[], newStatusOfList: FileFlatNode[]) {
          /... logic is happening here ... /
          this.childNodesToAnimateFadeIn = newItems;
          this.childNodesToAnimateFadeOut = deletedItems;
        }
  </code></pre>
  
  <p>Here is a shortened Version of my <strong>mat-tree</strong>:</p>
  
  <pre><code>&lt;mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl"&gt;
    &lt;mat-tree-node [@simpleFade]="getAnimationState(node)"&gt;
      {{text}}
    &lt;/mat-tree-node&gt;
    &lt;mat-tree-node [@simpleFade]="getAnimationState(node)"&gt;
      &lt;button mat-button mat-icon-button matTreeNodeToggle (click)="toggleNode(node)"&gt;
        &lt;mat-icon class="mat-icon-rtl-mirror"&gt;
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        &lt;/mat-icon&gt;
      &lt;/button&gt;
      {{text}}
    &lt;/mat-tree-node&gt;
  &lt;/mat-tree&gt;
  </code></pre>
  
  <p><strong>getAnimationState()</strong> is telling each tree-element which animation to do, like:</p>
  
  <pre><code>  getAnimationState(node: FileFlatNode): string {
      if (this.childNodesToAnimateFadeIn.includes(nodeId)) {
        return 'expand';
      } else if (this.childNodesToAnimateFadeOut.includes(nodeId)) {
        return 'collapse';
      }
    }
  </code></pre>
  
  <p>And in my component I tell how the <strong>simpleFade Animation</strong> should be done:</p>
  
  <pre><code> animations: [
      trigger('simpleFade', [
        transition('*=&gt;expand', [
          style({ opacity: 0 }),
          animate(2000)
        ]),
        transition('*=&gt;collapse', [
          style({ opacity: 1 }),
          animate(3000, style({ opacity: 0 }))
        ])
      ])]
  </code></pre>
  
  <p>Now this happens:
  I get a new <strong>dataSource._flattenedData</strong>. I am able to detect which list elements are new and so I fill <strong>childNodesToAnimateFadeIn</strong>. Like that, the fade-in-animation (<strong>*=>expand</strong>) is working fine.</p>
  
  <p>But, when I get new <strong>dataSource._flattenedData</strong> with previous items missing, I am able to detect them and add them to <strong>childNodesToAnimateFadeOut</strong>. But, unlike the fadeInAnimation, the fadeOutAnimation doesn't work. The Items disappear, before the fade-out-animation (<strong>*=>collapse</strong>) could start. </p>
  
  <hr>
  
  <p>Important note: I am not trying to fade in and out by using the toggle-button of mat-tree, that is working already. I want to find out how I can do a fade-out-animation if:</p>
  
  <ol>
  <li>There was a list before.</li>
  <li>I get a <strong>whole new</strong> list which is <strong>replaced</strong> with the old list.</li>
  <li>I detect which elements of the newly loaded list are missing now.</li>
  <li>I give every single list-element the right animation-state. That means: The list-items which are missing in the new list, get the fade-out animation-state.</li>
  </ol>
  
  <hr>
  
  <p>Note2: If you wonder what would happen if I replace</p>
  
  <pre><code>transition('*=&gt;collapse', [
          style({ opacity: 1 }),
          animate(3000, style({ opacity: 0 }))
        ])
  </code></pre>
  
  <p>with</p>
  
  <pre><code>transition(':leave', [
          style({ opacity: 1 }),
          animate(3000, style({ opacity: 0 }))
        ])
  </code></pre>
  
  <p>My whole list begins to fade out, instead of just specific list-items.</p>