【发布时间】：2019-08-03 13:02:18
【问题描述】：
背景
我正在寻求为组件内的徽章制作动画。它有两种可能的状态：
- 隐藏
- 显示
当徽章从隐藏过渡到显示时，我希望它淡入页面，当它从显示过渡到隐藏时，我希望它淡出。这部分工作正常 - 我只是将不透明度值的状态更改为 0 和 1 之间。
但是，当徽章被隐藏时，它仍然存在于 DOM 上，并且由于它是按钮的一部分，因此在鼠标悬停时看到徽章仍被占用的所有空白区域看起来很奇怪。理想情况下，我希望它在隐藏时从 DOM 中消失。
为此，我利用 ngIf 在 DOM 处于隐藏状态时将其从 DOM 中移除。这可以很好地删除和显示它，但是现在我已经在某种程度上消除了动画平滑过渡的整个要点，因为 ngIf 只是将它弹出（移动与徽章共享跨度的元素以便为这个徽章腾出空间) 然后播放动画。奇怪的是，当淡出动画应该发生时，它只是弹出不存在（没有淡出）。
因此，理想情况下，我想执行以下操作：
- 在淡入时，为 span 中的其他内容设置动画以滑到一边，执行我的徽章的 ngIf 以使其弹出存在，为徽章设置动画以使其淡入页面
- 在淡出时，对徽章进行动画处理，使其淡出页面，跳转页面中其他内容的状态，以便在我同时执行徽章的 ngIf 时保留其当前偏移量（因此尽管DOM 更改）然后为其他内容设置动画以滑回其新的正常位置。
问题：
API 是否允许将 ngIf 活动链接到动画过渡中，以便我可以在淡入和淡出之间进行平滑过渡？
我的问题与angular 2 ngIf and CSS transition/animation 不同，因为即使使用 ngIf 动画也能正常工作（至少它在淡入时可见），但我更希望在转换中包含 ngIf 的机制。
谢谢！
【问题讨论】：
标签： angular angular-animations