链接ngIf和动画过渡

Question

背景

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

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

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

为此，我利用ngIf从处于隐藏状态的DOM中删除徽章。这可以很好地删除和显示它，但现在我已经在某种程度上消除了动画平滑过渡的整个点，因为ngIf只是将其弹出（移动元素与徽章共享跨度以为此徽章腾出空间））然后动画播放。奇怪的是，当淡出动画应该发生时，它就会弹出不存在（没有淡出）。

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

在淡入时，为跨度中的其他内容设置动画以滑动到侧面，执行我的徽章的ngIf以使其弹出，为徽章设置动画，使其淡入页面
在淡出时，为徽章设置动画以使其淡出页面，跳过页面中其他内容的状态，以便在我同时执行徽章的ngIf时保留其当前偏移量（因此尽管DOM更改，它仍然保留在原位））然后设置其他内容的动画以滑回其新的正常位置。

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

我的问题不同于angular 2 ngIf and CSS transition/animation，因为即使使用ngIf，动画也能正常工作（至少它在淡入时是可见的），但我更需要在转换中包含ngIf的机制。

谢谢！

Answer 1

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

同样地，因为显示器显然可以被动画化，所以整个滑动另一个实体以便为徽章腾出空间，这也是一个加分。