链接 ngIf 和动画转换

Posted 2023-03-06

【中文标题】链接 ngIf 和动画转换

【英文标题】：Chaining ngIf and animation transitions

【发布时间】：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 的机制。

谢谢！

【参考方案1】：

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

同样，因为显示显然可以动画化，所以整个滑动其他实体为徽章腾出空间会自行发生，这也是一个优点。