angular - 文本行连续闪烁/闪烁

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