Hoạt cảnh crossfade văn bản kích hoạt góc 2 kích hoạt trên thay đổi dữ liệu

Question

Tôi có thành phần Angular 2 hiển thị tiêu đề. Có một dịch vụ lắng nghe những thay đổi dữ liệu từ các thành phần khác và có thể thay đổi giá trị chuỗi của tiêu đề.

Tôi muốn sử dụng hình động góc để mờ dần trong văn bản khi tải và sau đó để hòa tan/crossfade khi văn bản tiêu đề thay đổi. Tôi có fadein làm việc nhưng không chắc chắn làm thế nào để kích hoạt crossfade và cho dù chuyển đổi tương tự sẽ được sử dụng.

Đây là mã cho đến nay:

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

} 

Bất kỳ giúp nhiều đánh giá cao.

Answer 1

Mặc dù đây là 6 tháng tuổi, tôi vừa mới tham gia vào ngày hôm qua.
Dưới đây là một giải pháp nhanh chóng cho điều này:

Nếu bạn nghĩ về nó, bạn sẽ nhận ra rằng để crossfade bạn phải có cả hai tựa game trước và hiện tại trong tầm tay. Vì vậy, những gì còn lại bây giờ là để ẩn và hiển thị cả hai thay thế cho nhau.

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