Angular动画过渡期间如何应用恒定CSS样式？

当然可以实现！你遇到的问题是因为默认情况下，Angular会对transition块中定义的所有样式属性执行过渡动画——包括你想固定的背景色。要让背景色在高度变化期间保持恒定，只需要明确告诉Angular只对目标属性执行动画即可。

解决方案代码 #

animations: [
  trigger('animate', [
    state('true', style({ height: '10px' })),
    state('false', style({ height: '30px' })),
    transition('true<=>false', [
      // 过渡开始时立即应用红色背景（无动画）
      style({ backgroundColor: 'red' }),
      // 仅对height属性执行动画，背景色保持红色不变
      animate('5s', style({ height: '*' }))
    ]),
  ])

关键原理说明 #

1. style({ backgroundColor: 'red' })：这一步会在过渡启动的瞬间直接设置红色背景，没有任何动画延迟或渐变。
2. animate('5s', style({ height: '*' }))：这里的*是Angular动画的特殊值，表示自动过渡到目标state中定义的height值。通过明确指定只动画height属性，背景色会在整个5秒过渡期间保持红色，不会被纳入动画计算。

如果你的需求是过渡结束后也保持红色背景，只需要把backgroundColor: 'red'添加到两个state的style配置里即可：

state('true', style({ height: '10px', backgroundColor: 'red' })),
state('false', style({ height: '30px', backgroundColor: 'red' })),

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