连续 flashing/blinking 文本行

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>

它正在部分工作。如果我将 heading 的初始值设置为 'invisible' 只有淡入效果有效，反之亦然。

这似乎是间隔处理的问题。（我想知道这是否可以在没有 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;
    }
})

连续 flashing/blinking 文本行

Continuous flashing/blinking of text line

angular

rxjs

rxjs5

angular2-animation