Angular 6 如何基于条件动态绑定对应滑动动画？

现有代码的问题 #

你当前的模板写法没法达成预期的条件切换效果，核心问题有两个：

• 同一个DOM节点上同时硬编码了两个动画触发器绑定，运行时两个动画会并行触发，根本做不到按语言二选一
• Angular的动画触发器是在模板编译阶段就完成解析的，不支持通过运行时变量动态切换要绑定的触发器名称——哪怕你用动态字符串拼出触发器名，Angular也不会把它识别为合法的动画绑定。

两种能直接用的实现方法 #

方案一（推荐）：统一触发器 + 动态状态驱动 #

这是Angular官方推荐的动态动画实现思路，不会造成DOM重复渲染，动画切换的流畅度最好：

1. 先在组件的animations元数据里，把你之前独立定义的两个滑动动画，整合到同一个触发器下，用不同的状态值对应不同的滑动效果：

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     animations: [
       trigger('swipeAnim', [
         // 对应英语场景的状态：匹配原来的SwipeLeftToRight动画逻辑
         state('en', style({ /* 填入原SwipeLeftToRight动画的最终静态样式 */ })),
         transition('* => en', [
           // 把原SwipeLeftToRight动画的过渡逻辑写在这里
           animate('300ms ease-out')
         ]),
         // 对应非英语场景的状态：匹配原来的SwipeRightToLeft动画逻辑
         state('other', style({ /* 填入原SwipeRightToLeft动画的最终静态样式 */ })),
         transition('* => other', [
           // 把原SwipeRightToLeft动画的过渡逻辑写在这里
           animate('300ms ease-out')
         ])
       ])
     ]
   })
   

2. 模板中把触发器的绑定值和语言状态关联，根据语言判断传入对应的状态即可：

   <div [@swipeAnim]="translationService.currentLanguage === 'en' ? 'en' : 'other'">
     <a *ngIf='translationService.currentLanguage !== "en"'></a>
   </div>
   

方案二：条件渲染独立DOM节点 #

这种写法实现成本更低，但会造成DOM元素重复，切换语言时会直接销毁重建节点，性能稍差，适合逻辑简单的场景：

<!-- 英语场景：渲染带SwipeLeftToRight动画的节点 -->
<div *ngIf="translationService.currentLanguage === 'en'" [@SwipeLeftToRight]>
  <a *ngIf='translationService.currentLanguage !== "en"'></a>
</div>
<!-- 非英语场景：渲染带SwipeRightToLeft动画的节点 -->
<div *ngIf="translationService.currentLanguage !== 'en'" [@SwipeRightToLeft]>
  <a *ngIf='translationService.currentLanguage !== "en"'></a>
</div>

避坑提醒：不要尝试写类似[@动态触发器名]的绑定逻辑，比如把触发器名存在变量里拼接出来，这种写法在Angular 6中不会被识别为动画绑定，动画逻辑不会生效。

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