Angular 2+ 中的动画变量答案

【问题标题】：Variables on Animations in Angular 2+Angular 2+ 中的动画变量
【发布时间】：2017-10-10 15:07:44
【问题描述】：

我在 angular2+ 组件上使用了一些动画。它工作正常，但我想使用一些变量而不是硬编码值（'20px'，'10px'）。

是否有可能在动画中使用一些打字稿变量？

例如：

@Component({
 selector: 'animationDialog', 
 templateUrl: './animationDialog.component.html',
 styleUrls: ['./modal.component.css'], 
 animations: [
  trigger('dialog', [
   state('enter', style({
    transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)',
    top: 'this.TYPESCRIPTVAR3',
    height: 'this.TYPESCRIPTVAR4'
  })),
('leave', style({
    transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)',
    top: 'this.TYPESCRIPTVAR3',
    height: 'this.TYPESCRIPTVAR4'
  }))

当前代码：

animations: [
 trigger('dialog', [
  state('enter', style({
    transform: 'translate(0px, -80px)',
    top: '200px',
    height: '320px'
  }))

我已经检查过另一个question，但这个问题只处理一种可变样式。就我而言，我在一个属性上具有可变样式（例如“背景颜色”），但这些属性在不同状态下是可变的。

谢谢。

【问题讨论】：

angular2 animation with variable styles的可能重复
@zigzag 感谢您的帮助。在此链接中，它们只有一个属性作为变量。就我而言，所有属性都应该是 typescript-variables。
对，但我不明白为什么如果一个样式属性可以通过变量引用，它们都不应该。
我明白你的意思。例如，您有两种状态，并且在两种状态中都有一个背景颜色的变量值（'背景颜色'：'*'）。当您在 HTML 标记上获得以下属性时，您会参考哪个状态：[style.background-color]="bgColor"。您是参考第一个、第二个或两个状态的背景颜色吗？

标签： angular animation typescript

【解决方案1】：

ng2 在 4.1.x 的动画中不支持 var。

【讨论】：

现在支持。 stackoverflow.com/questions/41966673/…

【解决方案2】：

tellxp 是对的。不幸的是，这适用于样式，也适用于持续时间、延迟和缓和。这些和样式都必须是常规字符串或数字。

你应该做的是使用模板本身的变量，通过

[style.background-color]="yourVarHere";

更改 js 中的 var 并处理 CSS 中的动画。

.your-selector { background-color: #333; /* your default color */ transition: 300ms background-color; } 或者，如果您想在组件中使用动画处理它，请使用以下样式： {background-color: '*'} 读出当前颜色。

我希望这会有所帮助！

【讨论】：