链接 ngIf 和动画转换

Question

背景

我正在寻求为组件中的徽章制作动画。它有两种可能的状态：

• 隐藏
• 已显示

当徽章从隐藏变为显示时，我希望它淡入页面，当它从显示变为隐藏时，我希望它淡出。这部分工作正常 - 我只是将不透明度值的状态更改为 0 和 1 之间。

然而，当徽章被隐藏时，它仍然存在于 DOM 上并且因为它是按钮的一部分，所以在鼠标悬停时看到所有空 space 徽章看起来很奇怪仍然被占用。理想情况下，我希望它在隐藏时从 DOM 中消失。

为此，当 DOM 处于隐藏状态时，我使用 ngIf 删除徽章。这可以很好地删除和显示它，但现在我已经稍微消除了动画平滑过渡的全部要点，因为 ngIf 只是将它弹出（移动与徽章共享跨度的元素以为这个徽章腾出空间) 然后播放动画。奇怪的是，当淡出动画应该发生时，它只是突然消失（没有淡出）。

因此，理想情况下，我想执行以下操作：

• 在淡入时，为范围内的其他内容设置动画以滑到一边，执行我的徽章的 ngIf 使其弹出，为徽章设置动画使其淡入页面
• 在淡出时，为徽章设置动画，使其淡出页面，跳转页面中其他内容的状态，使其保持当前偏移量，同时我同时执行徽章的 ngIf（因此它停留在尽管 DOM 发生了变化），然后将其他内容设置为动画以滑回其新的正常位置。

问题：

API 是否允许将 ngIf activity 链接到动画过渡中，以便我可以在淡入和淡出之间实现平滑过渡？

我的问题与 不同，因为即使使用 ngIf 动画也能正常工作（至少它在淡入时可见），但我更想寻找一种机制将 ngIf 包含在转换。

谢谢！

Answer 1

根据同事的建议，我最终放弃了 ngIf 的使用，而是使用了 display，在隐藏状态下将其设置为 none 并恢复它。由于这完全可以用 CSS 实现，我可以只使用动画中的内置功能而无需做任何古怪的事情。

同样，因为显示显然可以是动画的，所以整个将另一个实体滑过以为徽章腾出空间的过程本身就发生了，这也是一个优点。