父子元素一起动angular-animations的animateChildren子元素动画完全攻略【免费下载链接】angular-animations:sparkles: Easy, Reusable Animation Utility library for Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-animationsangular-animations是一个为 Angular 15 打造的可复用动画工具库把 animate.css 的全部动画搬进了声明式模板。而它最容易被忽略、却最实用的高级参数就是animateChildren——它能让你一句话让父元素 所有子元素按指定顺序一起动彻底告别手写query()和animateChild()的痛苦。这篇攻略带你从零搞懂它的 4 种模式、正确用法和常见坑。为什么你需要让父子元素一起动日常开发中带动画的组件往往不是一个光板 div而是一整个卡片卡片父容器做弹入动画里面的标题、图标、按钮却静止不动视觉上很割裂用*ngIf关闭父元素时希望子元素先淡出、父容器再收起形成层次感用原生angular/animations实现父先动、子后动要自己写query(*)animateChild()sequence()配置繁琐且容易漏掉子节点angular-animations 的解法非常直接每个动画函数都内置了对子元素动画的支持你只需通过animateChildren参数声明时序即可。animateChildren 的 4 种模式怎么选参数定义见 interfaces.ts支持 4 个取值且只能写在组件装饰器里不能写在模板中取值执行顺序典型场景together默认父、子同时开始、同时结束卡片整体弹入内部内容同步运动before子元素先动父元素随后跟进内容先落座容器再包裹进来after父元素先动子元素随后容器先展开内容再填充none子元素不播放动画随父元素刚性位移列表项整体滑动无需内部细节核心实现逻辑在两个文件里感兴趣可以对照阅读use-animation-including-children.ts状态动画版用query(*, animateChild())把子动画编入父动画animate-including-children.tsanimate()直出版按before / together / after决定query插在前、中、后三步上手最快配置方法第 1 步安装并注册动画模块npm i angular-animations --save在根模块如 app.module.ts导入BrowserAnimationsModule。第 2 步给任意动画函数传animateChildren官方演示里就有真实用例见 demo-on-enter-on-leave.component.tsanimations: [ // 默认 together子元素和父容器一起弹入 bounceInRightOnEnterAnimation({ anchor: enter2 }), // none只让父容器动子元素保持静止 bounceInRightOnEnterAnimation({ anchor: enter3, delay: 200, animateChildren: none }), // after父容器弹入完成后再带动子元素 fadeInUpOnEnterAnimation({ animateChildren: after, duration: 500 }) ]第 3 步模板照常写锚点div *ngIfshowCard [enter2] h3标题/h3 button [pulse] (click)do()操作/button /div就这样父元素的入场/出场动画会自动捎带所有挂了动画触发器的子元素。进阶技巧让离开动画更有层次如果你想做的是父元素消失时只播子元素的离场动画库里还专门提供了一个独立触发器——animate-children.animation.ts 导出的animateChildrenOnLeaveAnimation// 只监听 :leave内部是 query(*, animateChild()) animateChildrenOnLeaveAnimation()配合*ngIf使用div [animateChildrenOnLeave] *ngIfshowList li *ngForlet item of list [fadeOutOnLeave]{{ item }}/li /div效果列表整体移除时每一行子项依次淡出父容器本身不做额外动画——非常适合做列表卸载、Tab 切换的细腻过渡。避坑清单3 个高频问题参数写不进模板。animateChildren与direction一样属于只能装饰器内静态配置的参数模板里传{ params: { animateChildren: after } }是无效的。子元素必须挂自己的动画触发器。内部原理是query(*)匹配子级触发器子元素若没有任何[xxx]它只会随父容器刚性位移不会一起动。默认值是together而不是none。想关掉子元素动画记得显式写none否则每个动画都会自动扩散到子级。总结你的需求推荐配置卡片整体弹入内外同步不传参数默认together容器展开后内容再填充animateChildren: after内容先行、容器收尾animateChildren: before整体刚性移动animateChildren: none离场时只淡出子项animateChildrenOnLeaveAnimation一行参数换回整套sequence/query/animateChild的手工编排这就是angular-animations 的 animateChildren对新手最友好的地方API 克制、语义清晰配合库内现成的上百种入场/出场动画基本能覆盖所有父子一起动的场景。【免费下载链接】angular-animations:sparkles: Easy, Reusable Animation Utility library for Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-animations创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考