角度 – 文本行的连续闪烁/闪烁

2023年9月16日 184次阅读

我正在尝试在一行文本上应用淡入淡出动画.我想保持它定期间隔(类似文本闪烁).我正在使用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动画.两者都给我同样的效果.

最佳答案 唯一的问题是时机.您希望每隔一秒更改文本,因为动画需要重播两个始终为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;
    }
})
点赞