Question

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

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

例如：

@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，但此问题仅处理一种变量样式。就我而言，我在一个属性上有一个变量样式（例如＆＃34; background-color＆＃34;），但这些属性在不同的状态下是可变的。

感谢。

Answer 1

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

Answer 2

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

你应该做的是通过

使用模板本身的变量

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

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

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

我希望这有帮助！

Angular 2+中动画的变量

2 个答案: