Toast stuck in transparent state

You can find information on how to change toast opacity in our documentation:

https://mdbootstrap.com/docs/angular/advanced/notifications/

Hi,I have found that changing the opacity as in the docs results in a flickering effect in the toast.How can I make the toast behave exactly as it does in the link you provided above?Thanks,John

Dear @johnpmcg83

Could you please provide me with the reproduction steps? I would like to debug your problem.

Also, please provide me with screenshots of actual behavior.

Without these informations, I won't be able to help you well.

Best Regards,

Damian

Hi Damian,

Sorry, I cant provide a screenshot to show a flicker as it is an animation.

To reproduce simply create a blank project with mdbpro v 7.5.2 an include the following as AppComponent

export class AppComponent {
 title = 'ng-uikit-pro-standard-compile-app';

 constructor(private toastrService: ToastService) {}
 showSuccess() {
    const options = { closeButton: true, toastClass: 'opacity' };
   this.toastrService.success('Info message', 'Success!', options);
 }
 }

And then the following in styles.scss:

.opacity {
 opacity: 1 !important;
}
#toast-container > mdb-toast-component.opacity,
#toast-container > mdb-toast-component.opacity > div {
opacity: 1 !important;
}

The flickering most commonly happens on the first call to the .success method on both the toast message fading in, and fading out.