小编Par*_*ore的帖子

我正在尝试在一行文本上应用淡入淡出动画。我想让它定期进行（类似于文本闪烁）。我正在使用 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 …

什么是在Angular2/Typescript(ES6)中合并两个没有重复的数组的最快最简单的方法.

ps数组包含嵌套对象.

我知道那里已经有很多答案了.这就是为什么我很困惑.我试过这个答案,但我无法让它发挥作用.

提前致谢.