角度2触发文本交叉渐变动画数据更改

Question

我有一个显示标题的Angular 2组件.有一个服务可以侦听来自其他组件的数据更改,并且可以更改标题的字符串值.

我希望使用Angular动画在加载时淡入文本,然后在标题文本更改时淡化/交叉渐变.我有fadein工作但不确定如何触发交叉渐变以及是否使用相同的转换.

这是迄今为止的代码:

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

虽然这已经是六个月前的事了，但我昨天才碰到这个。
这是一个快速解决方案：

如果您考虑一下，您就会意识到，为了交叉淡入淡出，您必须同时拥有以前的和当前的标题。所以现在剩下的就是交替隐藏和显示两者。

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