不透明度角度上的css过渡

Question

我正在尝试创建一个角度的小小吃栏，它将一个数组作为输入并显示每个通知几秒钟，然后从堆栈中弹出并显示下一个通知。

我希望在这些通知之间有一个不透明度转换。

过渡属性似乎不起作用

这是堆栈闪电战链接

更多信息：

< li >应用程序组件有一个按钮，每次单击都会生成一个通知 < li>snackbar组件显示3秒钟的通知，然后删除它并切换到下一个。 < li>snackbar容器用0 opacity()实例化

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

并且有一个<代码>。isVisible类，在init中提供了不透明度

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

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

Answer 1

您在snackbar组件上使用*ngIF，这就是css转换不起作用的原因。

请参考此问题以使用角度浏览器动画模块。当您通过浏览器动画模块制作动画时，还有淡入/淡出效果选项。