Angular 8 单状态动画transition不生效？卡片画廊滚动过渡实现

完全不需要强制配置两个固定命名状态才能触发过渡动画。你当前动画完全失效，是代码存在多层面的配置、绑定、逻辑硬错误，并非Angular动画机制本身的限制。

• 动画状态定义语法错误：原state配置中把参数默认值写成了嵌套插值的字符串rightValue: '{{rightValue}}'，把模板语法混进了动画参数定义里，完全不符合Angular动画的规范
• 动画绑定对象错位：把[@movement]绑定在了外层mask容器上，但实际需要移动的是内部的containerCards，绑定目标错误自然看不到位移效果
• 定位属性不生效：原CSS里containerCards用了relative定位，对元素设置right值不会产生实际的位置偏移，必须是absolute定位才能让right属性控制元素位置
• 状态永远不触发变更：每次动画传入的状态值都是固定字符串'move'，Angular对比新旧状态时识别不到差异，根本不会进入动画过渡流程——这就是你误以为“需要两个状态才能用transition”的根本原因
• 按钮逻辑完全写错：原left()和right()方法都执行rightValue -34，两个按钮功能没有任何方向区分
• 回调函数语法错误：原moveCallback函数的代码块多了一层闭合大括号，会直接抛出语法异常，导致动画绑定拿不到正确的参数值
• 页面元素叠位：原CSS里左右按钮都设置了right:20px，两个按钮会完全叠在右侧；卡片也没有设置对应的横向排布值，所有卡片会叠在同一位置

方案1：用CSS原生transition实现（推荐，适配当前场景） #

不需要写复杂的Angular动画触发器，直接靠原生CSS过渡就能实现平滑效果，代码量更少、排查问题更简单

修正后的TS代码 #

// 初始化位移值，初始位置right=0时容器右边缘与mask右边缘齐平，显示最左侧卡片
rightValue = 0;
// 每次滑动的步长，和3张卡片的宽度匹配
private readonly STEP = 34;
// 最大可滑动偏移，4张卡片总宽度为4*33%=132%，遮罩宽度为100%，最大位移32%即可避免卡片滑出遮罩范围
private readonly MAX_OFFSET = 32;

cards = [
  { name: "First card" },
  { name: "Second card" },
  { name: "Third card" },
  { name: "Fourth card" }
]

// 右滑（回到更靠左的卡片）：减小right值，最小不小于0
left() {
  this.rightValue = Math.max(0, this.rightValue - this.STEP);
}

// 左滑（看到更靠右的卡片）：增大right值，最大不超过MAX_OFFSET
right() {
  this.rightValue = Math.min(this.MAX_OFFSET, this.rightValue + this.STEP);
}

修正后的HTML代码 #

<div class="mask">
  <div class="left-btn" (click)="left()">LEFT</div>
  <!-- 直接绑定right样式，不需要额外的动画回调函数 -->
  <div class="containerCards" [style.right.%]="rightValue">
    <div class="card" *ngFor="let item of cards; let i = index">
      <span>{{item.name}}</span>
    </div>
  </div>
  <div class="right-btn" (click)="right()">RIGHT</div>
</div>

修正后的CSS代码 #

.mask {
  position: relative;
  overflow: hidden;
  height: 90px;
}

.left-btn {
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 10;
}

.right-btn {
  position: absolute;
  top: 30px;
  right: 20px;
  z-index: 10;
}

.containerCards {
  position: absolute;
  top: 0;
  left: 0;
  width: 132%;
  height: 100%;
  /* 核心：给right属性加过渡效果，替代Angular动画 */
  transition: right 1.6s ease-out;
}

.card {
  position: absolute;
  top: 0;
  width: 33%;
  height: 100%;
}

/* 给每张卡片按顺序排位置，避免全部叠在同一处 */
.card:nth-child(1) { left: 0; }
.card:nth-child(2) { left: 33%; }
.card:nth-child(3) { left: 66%; }
.card:nth-child(4) { left: 99%; }

方案2：修正原Angular动画触发器的写法 #

如果一定要用Angular动画系统实现，把原来的错误配置全部修正即可：

修正后的动画定义 #

animations: [
  trigger('movement', [
    state('move', style({
      right: '{{rightValue}}%'
    }), { 
      // 参数默认值写具体数值，不要嵌套插值语法
      params: { rightValue: 0 } 
    }),
    transition('* <=> *', [
      animate('1.6s ease-out')
    ])
  ])
]

修正后的HTML绑定 #

把动画从mask上移到containerCards上，去掉原来有语法错误的moveCallback函数：

<div class="mask">
  <div class="left-btn" (click)="left()">LEFT</div>
  <div class="containerCards" [@movement]="{ value: 'move', params: { rightValue: rightValue } }">
    <div class="card" *ngFor="let item of cards; let i = index">
      <span>{{item.name}}</span>
    </div>
  </div>
  <div class="right-btn" (click)="right()">RIGHT</div>
</div>

这种写法和CSS原生方案效果完全一致，只是多了一层Angular动画的封装，适合需要更复杂动画编排的场景。

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