Animacja przenikania tekstu z wyzwalaczem Angular 2 przy zmianie danych

Question

Mam element Angular 2, który wyświetla nagłówek. Istnieje usługa, która nasłuchuje zmian danych z innych komponentów i może zmienić wartość ciągu nagłówka.

Chcę użyć animacji kątowej, aby zaniknąć w tekście podczas ładowania, a następnie rozpuścić/przeniknąć po zmianie tekstu nagłówka. Mam fadein działający, ale nie jestem pewien, jak wywołać przenikanie i czy to samo przejście zostanie zastosowane.

Oto kod do tej pory:

import { Component, OnInit, Input, style, transition, animate, trigger } from '@angular/core'; 
import { DataTransferService } from '../services/data-transfer.service'; 

@Component({ 
    selector: 'app-page-header', 
    template: '<h1 [innerHTML]="heading" [@fadeMe]="heading" *ngIf="heading != null"></h1>', 
    animations: [ 
     trigger('fadeMe', [ 
      transition('void => *', [style({opacity: 0}), animate('500ms ease-in', style({opacity: 1}))]) 
     ]) 
    ] 
}) 
export class PageHeaderComponent implements OnInit { 

    public heading: string = ''; 

    constructor(
     private pageHeaderService: DataTransferService 
    ) { } 

    ngOnInit() { 
     this.pageHeaderService.pageHeaderData$.subscribe(
      data => { 
       this.heading = data['heading']; 
      }); 
    } 

} 

Każda pomoc mile widziane.

Answer 1

Chociaż ma to 6 miesięcy, po prostu wpadłem na to wczoraj.
Oto szybkie rozwiązanie tego problemu:

Jeśli myślisz o tym, zdasz sobie sprawę, że w celu przenikania trzeba mieć zarówno wcześniejsze i obecne tytuły w zasięgu ręki. Pozostało tylko ukryć i pokazać oba zamiennie.

<!-- class title sets both to the same absolute location --> 
    <h1 class="title" [@crossfade]="state1">{{title1}}</h1> 
    <h1 class="title" [@crossfade]="state2">{{title2}}</h1> 

animations: [ 
     trigger('crossfade', [ 
      state('show', style({ opacity: 1 })), 
      state('hide', style({ opacity: 0 })), 
      transition('* => show', animate('1s ease-in')), 
      transition('show => hide', animate('1s ease-out')) 
     ])] 

... 

    title1: string; 
    title2: string; 
    state1 = 'hide'; 
    state2 = 'hide'; 

switchTitles() { 
     const newTitle = ... //get new title 
     if (this.state1 === 'show') { 
      this.title2 = newTitle; 
      this.state1 = 'hide'; 
      this.state2 = 'show'; 
     } else { 
      this.title1 = newTitle; 
      this.state2 = 'hide'; 
      this.state1 = 'show'; 
     } 
    }