Continuous flashing/blinking of text line

Question

I'm trying to apply fade-in, fade-out animation on a line of text. I want to keep it doing on regular interval (something like text flashing). I am using Observable for state triggering.

This is my animations array:

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

Variables I'm using:

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

Observable:

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

And here's HTML:

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

It is working partially. If I put initial value of heading as 'invisible' only fade-in effect is working & vice versa.

It seems to be problem with interval handling. (I'd like to know if this can be done without Observable)

I've tried using both Angular 2 core animation as well as normal CSS animation. Both are giving me same effect.

Answer 1

The only problem was timing. You want to change the text every second tick because the animation needs to replay both in-out cycle which takes always 4s.

See your updated demo: 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;
    }
})