css transition on opacity angular-CodePudding

I'm trying to create a small snackbar in angular which takes as input an array and show each notification for a few seconds before popping it from the stack and showing the next.

i'd like to have an opacity transition in and out between those notification.

Transition property doesn't seems to work

Here's the stackblitz link

Some more info:

app component has a button which generates 1 notification for each click
snackbar component displays a notification for 3 seconds then deletes it and switching to the next.
snackbar container is instantiated with a 0 opacity ()

.snackbar {
  opacity: 0;
  transition: opacity 1s linear 2s;
}

and there is a .isVisible class with opacity one provided on init

.visible {
  opacity: 1;
  transition: opacity 1s linear 2s;
}

for some reason the snackbar appears right away with max opacity. Also, i'm not sure how to manage a fade out / fade in between notifications, any suggestion?

CodePudding user response：

You're using *ngIf on your snackbar component, that's why css transitions do not work.

Refer to this question in order to use angular BrowserAnimationsModule. There are also options for fade in / out effects when you're animating through BrowserAnimations Module.