css 不透明度过渡 angular

Question

我正在尝试在 angular 中创建一个小的 snackbar，它将一个数组作为输入并在从堆栈中弹出之前显示每个通知几秒钟并显示下一个。

我希望在这些通知之间有一个不透明度进出过渡。

转换 属性 似乎不起作用

这是stackblitz link

更多信息：

• app 组件有一个按钮，每次点击都会生成 1 个通知
• snackbar 组件显示一个通知 3 秒然后将其删除并切换到下一个。
• snackbar 容器实例化为 0 不透明度 ()

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

并且有一个 .isVisible class 不透明度在 init

上提供

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

出于某种原因，快餐栏立即以最大不透明度出现。 另外，我不确定如何管理通知之间的淡出/淡入，有什么建议吗？

Answer 1

您在快餐栏组件上使用 *ngIf，这就是 css 转换不起作用的原因。

参考以使用angular BrowserAnimationsModule。当您通过 BrowserAnimations 模块制作动画时，还有淡入/淡出效果选项。