Adding of fade effect to angular2-flash-messages

[darsana]

Hi...

currentley i am using the flash message like below
this._flashMessagesService.show('Added Successfully!', { cssClass: 'alert-success', timeout: 1900 });
How an i add the fade effect to the message ?

[moff]

Hi @darsana!
There is no such functionality in the package.

[seantrant]

Hi @darsana,

Bit late, but it might still help you or someone else who wants to do this. You can get this effect with css.

Create a css rule with keyframes that will fade in and out over a time period.

@Keyframes flashfade {
0% {opacity:0;}
20% {opacity:1}
80% {opacity:1}
100% {opacity:0}
}
.flashfade {
animation-name: flashfade;
animation-duration: 6s;
display: block;
}

Then just include this class when calling the function, and set the effect to last as long as the css animation.

this._flashMessagesService.show( message , { cssClass: 'flashfade alert-success', timeout: 6000 });

[lokeshrmitra]

@seantrant
have you tested the above? does it actually work?
In my case custom css classes didn't work

[dduraeso]

@lokeshrmitra for this to work you need to add the css rules to styles.css