角度：在：leave和：enter状态上为嵌套的组件设置动画

问题描述

我想为元素的DOM插入/删除设置动画，这是由我的组件树中更高一级的父级触发的，如下所示：

<component-A>
  <component-B *ngIf="condition">
    <component-C>
      <div @fadeEnterLeave>animated element</div>
    </component-C>
  </component-B>
</component-A>

（请注意，这些组件不是“包含”的（没有使用ng-content的 Content Projection ）；它们只是直接的，只有父级各自模板中的子级（最小复制效果更好说明我的问题：here））

照原样，只有:enter过渡是有动画的，因为component-A的子树在没有满足condition时会立即消失，从而阻止了:leave动画玩。

现在，angular doc指出：

每次在Angular中触发动画时，父动画具有优先级，所有子动画均被阻止。

所以我需要使用component-C函数将动画“滴流”到animateChild：

trigger("cascade",[
  transition(":enter,:leave",[query("@*",animateChild())])
])

component-B模板：

<component-C @cascade></component-C>

将此触发器添加到component-B（将触发器应用于其模板中的component-C元素）会产生我的预期结果：:enter 和 {{1 }}动画将在:leave的div中播放。

要注意的是，就我而言，component-C还为其模板的元素注册了动画，并出于某种原因重用了component-A触发器（仅此一个触发器，甚至没有其他触发器）动画）跳过@cascade的div动画：两种状态都调用component-C触发器，但是动画一开始就“完成”。

同样，我可能不太清楚，但是the demo is。 打开控制台以查看每个触发器“开始”和“完成”时间和顺序的日志。破坏者：触发事件不会按树形顺序“向上/向下冒泡”。

我肯定会错过一些愚蠢的事情，因为要使元素的：enter /：animate动画远离父元素的@fadeInOut或[ngFor]一定是很常见的事情？

谢谢您的输入！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）