Angular如何根据inc变量为组件配置条件动画？inc变更后动画不生效

• 现有动画触发器仅定义了:enter/:leave对应的DOM进出过渡规则，没有建立inc变量值和动画状态的映射关系，框架无法识别inc变更对应的动画逻辑
• 同一元素上同时绑定两个互斥的动画触发器的写法存在逻辑冲突，框架不会将这类绑定值的变更判定为需要触发动画的状态切换
• *ngIf="hide"仅控制元素的挂载/卸载生命周期，只要元素持续存在于DOM中，单纯修改inc值不会触发任何预设的过渡效果

将两个独立触发器的逻辑整合为单一触发器，把inc的两个取值对应为动画的两个状态，明确不同状态间切换的过渡规则：

1. 整合后的触发器定义代码

   trigger('conditionalSlideAnim', [
     // 绑定inc为true时的元素终态样式
     state('true', style({
       transform: 'translateY(0%)',
       backgroundColor: 'red'
     })),
     // 绑定inc为false时的元素终态样式
     state('false', style({
       transform: 'translateY(0%)',
       backgroundColor: 'blue'
     })),
     // 元素首次进入DOM且inc为true时的入场动画
     transition('void => true', [
       style({transform: 'translateY(75%)'}),
       animate('400ms ease-in')
     ]),
     // 元素首次进入DOM且inc为false时的入场动画
     transition('void => false', [
       style({transform: 'translateY(-75%)', backgroundColor: 'blue'}),
       animate('400ms ease-in')
     ]),
     // inc值在true/false之间切换时的过渡动画
     transition('true <=> false', [
       animate('400ms ease-in')
     ]),
     // 元素从DOM移除时的离场动画，匹配对应方向的位移效果
     transition('true => void', [
       animate('400ms ease-in', style({transform: 'translateY(-75%)'}))
     ]),
     transition('false => void', [
       animate('400ms ease-in', style({transform: 'translateY(75%)'}))
     ])
   ])
   

2. 模板绑定调整代码

   <div *ngIf="hide" [@conditionalSlideAnim]="inc">{{mapLength}}</div>
   

• 动画触发器绑定的布尔值会被自动转换为字符串形式，需和state定义的状态键名（'true'/'false'）完全匹配，才能被框架正确识别
• 避免在同一元素上通过绑定两个独立触发器实现互斥的方向动画，单触发器整合全状态的写法是框架支持的标准用法
• 若需要自定义动画切换的偏移方向，可在对应transition规则中补充初始样式定义，不需要拆分多个独立触发器

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