Question

我正在尝试在一行文字上应用淡入淡出动画。我想保持它定期间隔（类似文本闪烁）。我正在使用Observable进行状态触发。

这是我的动画阵列：

animations: [
    trigger('showhide', [
        state('invisible', style({opacity: '0', visibility: 'hidden'})),
        state('visible', style({opacity: '1', visibility: 'visible'})),
        transition('invisible <=> visible', animate('2s linear'))
    ])
]

我正在使用的变量：

heading = 'invisible';
index: number = 0;
headingarray = [
    "Heading 1",
    "Heading 2",
    "Heading 3"
]

可观察：

Observable.interval(2000)
        .subscribe(x => {
            console.log(x);
            this.heading = (this.heading == 'visible') ? 'invisible' : 'visible';
            this.index = (x / 2) % 3
        })

这是HTML：

<h2 [@showhide]="heading">
    {{headingarray[index]}}
</h2>

部分工作。如果我将标题的初始值设置为“隐形”，则只有淡入效果才有效。反之亦然。

间隔处理似乎有问题。（我想知道如果没有Observable可以做到这一点）

我尝试过使用Angular 2核心动画以及普通的CSS动画。两者都给我同样的效果。

Answer 1

唯一的问题是时机。您希望每隔一秒更改文本，因为动画需要重播两个始终为4秒的输入输出周期。

查看更新后的演示：http://plnkr.co/edit/1lMLXmjIgDLnmd8L0qI5?p=preview

.subscribe(x => {
    console.log(x);
    this.heading = (this.heading == 'visible') ? 'invisible' : 'visible';
    if (x % 2 == 0) {
        this.index = (x / 2) % 3;
    }
})

文本行连续闪烁/闪烁

1 个答案: