データ2の角度2のトリガーテキストのクロスフェードアニメーション

Question

見出しを表示する角度2のコンポーネントがあります。他のコンポーネントからのデータ変更をリッスンし、見出しの文字列値を変更するサービスがあります。

角度アニメーションを使用して、読み込み時にテキストをフェードインし、見出しテキストが変化したときにディゾルブ/クロスフェードしたいと考えています。私はフェードインの作業をしていますが、クロスフェードをトリガーする方法と、同じトランジションを使用するかどうかはわかりません。

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

} 

すべてのヘルプははるかに高く評価：ここ

は、これまでのコードです。

Answer 1

これは6ヶ月ですが、私は昨日これにぶつかりました。ここ
は、このための迅速なソリューションです：

あなたが考えてみれば、あなたはをクロスフェードするために、あなたが手で以前と現在の両方のタイトルを持っている必要がありますことを実現します。だから今残っているのは、両者を区別せずに隠すことだけです。

<!-- 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'; 
     } 
    }