Question

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

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

以下是目前的代码：

AtomicLong

任何帮助都非常感激。

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

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

1 个答案: