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