链接 ngIf 和动画过渡

Question

我正在寻求对组件中的徽章进行动画处理。它有两种可能的状态：

• 隐藏
• 显示

当徽章从隐藏转变为显示时，我希望它淡入页面，当徽章由显示转变为隐藏时，我想它淡出。这部分工作得很好-我只需在0和1之间更改不透明度值的状态。

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

为此，当徽章处于隐藏状态时，我利用ngIF从DOM中删除徽章。这对于删除和显示它很有效，但是现在我已经在某种程度上消除了动画平滑过渡的全部意义，因为ngIF只是弹出它的存在（移动与徽章共享跨度的元素，为徽章腾出空间），然后动画播放。奇怪的是，当淡出动画应该发生时，它只是弹出存在（没有淡出）。

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

< li >淡入时，动画显示跨度中的其他内容滑动到侧面，执行我的徽章的ngIf，使其突然出现，动画显示徽章，使其淡入页面 < li >淡出时，制作徽章动画，使其淡出页面，跳转页面中其他内容的状态，使其保持当前偏移，同时执行徽章的ngIf(因此尽管DOM发生变化，它仍保持不变)，然后制作其他内容动画，使其滑回新的正常位置。

API是否允许将ngIf活动链接到动画转换中，以便我可以在淡入和淡出之间进行平滑转换？

我的问题与角度 2 ngIf 和 CSS 过渡/动画不同，因为即使使用 ngIf，动画也可以工作（至少在淡入时可见），但我更在寻找一种机制将 ngIf 包含在过渡中。

谢谢！

Answer 1

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

同样，因为显示显然可以动画化，所以整个滑动到另一个实体上为徽章腾出空间的过程都是自己进行的，这也是一个优点。