Angular父元素fadeIn动画导致子元素fallIn动画失效如何解决

Angular 完全支持嵌套元素同时绑定独立动画，你遇到的子元素动画失效问题不是框架能力限制，是默认动画执行规则导致的。

当父元素触发:enter（即void => *）入场动画时，Angular 动画引擎默认会接管父容器内部所有后代元素的动画执行时序，子元素单独绑定的入场动画会被父动画的执行逻辑阻塞，这就是移除父元素fadeIn绑定后，子元素fallIn动画立刻恢复正常的原因。

如果要让父子元素的入场动画完全独立执行、互不干扰，只需要给绑定了父动画的元素添加 [@.skip]="true" 配置，告诉Angular不要干预当前元素内部子元素的动画调度即可。
修改后的模板代码如下：

<div @fadeIn class='intro-window' [@.skip]="true">
    <div @fallIn class='social-buttons'>
         <a mat-fab color="primary"></a>    
    </div>
</div>

这个配置不受父子元素中间存在其他DOM节点的影响，完全适配你提到的“两个元素之间存在其他元素、无法合并动画绑定”的场景。

额外提醒：你当前定义的fallIn动画最终样式为opacity: 0+translateX(-100%)，也就是动画执行结束后子元素会完全透明并移出视口左侧，如果这不符合你的预期，自行调整animate里的最终样式值即可，这个逻辑问题和嵌套动画不生效的故障无关。

如果你后续需要父子动画按特定顺序配合执行（比如父元素淡入完成后再触发子元素动画），也可以去掉skip配置，在父动画的transition里用query()方法主动查询子元素的动画触发器，手动指定时序；但针对你当前“两个动画独立执行”的需求，加skip配置是实现成本最低、兼容性最好的方案。

内容的提问来源于stack exchange，提问作者Nitish