如何从代码更改角度动画持续时间答案

【问题标题】：How to change Angular animation duration from code如何从代码更改角度动画持续时间
【发布时间】：2021-04-12 09:55:53
【问题描述】：

我试图弄清楚如何根据按钮单击动态更改角度动画的持续时间。我希望能够为慢速、中速和快速设置一个按钮，它将“600 毫秒缓和”更新为不同的持续时间，但我无法成功地将其设置为变量。我尝试像这样设置一个名为 speed 的变量：

transition('rest =>right', animate(this.animationSpeed)),

但我收到“对象可能未定义”的警告

这是我的动画触发器。有没有人处理过这个问题？

动画：[ 触发器（'moveItem'，[

  state('right', style ({ 
    transform: 'translateX(45vw)',
  })),
  state('left', style ({ 
    transform: 'translateX(-45vw)',
  })),
 
  transition('rest =>right', animate('600ms ease')),
  transition('right =>left', animate('600ms ease')),
  transition('left =>right', animate('600ms ease')),
  transition('rest =>left', animate('600ms ease')),
  transition('left =>rest', animate('600ms ease')),
  transition('right =>rest', animate('600ms ease')),

感谢您的宝贵时间！

【问题讨论】：

实际上，angular 不支持从代码中更改持续时间。我认为您应该在他们的网站上打开功能请求

标签： angular angular-animations

【解决方案1】：

目前您尝试做的事情是不可能的，角度不接受使用参数更改持续时间

这可能是一种解决方法

在component.html文件中用css绑定

<img src="anUrl"
   [ngStyle]="transition"
/>

然后在component.ts内切换动画

translation = {}

onRight(duration: string): void {
  translation = {
   'transition-duration.ms': duration,
   transform: 'translateX(45vw)',
 }
}


onLeft(duration: string): void {
  translation = {
   'transition-duration.ms': duration,
    transform: 'translateX(-45vw)',
 }
}

不要忘记在 component.scss 文件中添加默认转换

img {
  transform: translate(0,0)
}

这肯定不是完美的解决方案，但它可能会有所帮助

【讨论】：