将动画输入参数绑定到Angular 4.2.0中的组件属性

我想将动画输入参数绑定到组件属性。有没有办法使用angular4.2.0的新动画功能

例如，我希望用户设置对象的坐标，并且对象应相应地移动：

Myapp.component.ts：

import { Component } from '@angular/core';
import { trigger,state,style,animate,transition,animation,useAnimation} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [trigger('move', [
    transition('start <=> finish', 
    useAnimation(animation([
      animate(1000, style({top: '{{x}}px',left:'{{y}}px'}))
    ], { params: { x: 100, y: 100 }})))
  ])]
})
export class AppComponent {
  moveAnimation = { value: 'start', x: 10, y: 10 };
  move() {
    this.moveAnimation.value = this.moveAnimation.value == 'finish' ? 'start' : 'finish';
  }
}

X:<input type="number" [(ngModel)]="moveAnimation.x"><br/>
Y:<input type="number" [(ngModel)]="moveAnimation.y"><br/>
<button (click)="move()">Move</button><br/>
<div class="container">
  <div class="box" [@move]="moveAnimation"></div>
</div>

---

老实说，我不确定Angular Animations库是否对您来说是最好的。您想要使用它（带参数）的方式似乎仍然是一个问题。与其使用动画库，为什么只使用一些CSS就可以完成同样的工作？我已经包括了一个演示，你可以测试

组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  moveBox = { x: 10, y: 10 };
  moveInputs = { x: 10, y: 10 };
  move() {
    this.moveBox.x = this.moveInputs.x;
    this.moveBox.y = this.moveInputs.y;
  }
}

HTML

X:<input type="number" [(ngModel)]="moveInputs.x"><br/>
Y:<input type="number" [(ngModel)]="moveInputs.y"><br/>
<button (click)="move()">Move</button><br/>
<div class="container">
  <div class="box" [style.top.px]="moveBox.x" [style.left.px]="moveBox.y"></div>
</div>

---

老实说，我不确定Angular Animations库是否对您来说是最好的。您想要使用它（带参数）的方式似乎仍然是一个问题。与其使用动画库，为什么只使用一些CSS就可以完成同样的工作？我已经包括了一个演示，你可以测试

组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  moveBox = { x: 10, y: 10 };
  moveInputs = { x: 10, y: 10 };
  move() {
    this.moveBox.x = this.moveInputs.x;
    this.moveBox.y = this.moveInputs.y;
  }
}

HTML

X:<input type="number" [(ngModel)]="moveInputs.x"><br/>
Y:<input type="number" [(ngModel)]="moveInputs.y"><br/>
<button (click)="move()">Move</button><br/>
<div class="container">
  <div class="box" [style.top.px]="moveBox.x" [style.left.px]="moveBox.y"></div>
</div>

---

我修改了@MichaelSolati的plunker，使用

@Angular/animations

显示角度方式

在模板中：

<div class="container">
  <div class="box" #movebox></div>
</div>

---

我修改了@MichaelSolati的plunker，使用

@Angular/animations

显示角度方式

在模板中：

<div class="container">
  <div class="box" #movebox></div>
</div>

---

此行的

params

格式不正确：

moveAnimation = { value: 'start', x: 10, y: 10 };

应该是：

moveAnimation = { value: 'start', params: {x: 10, y: 10 });

---

此行的

params

格式不正确：

moveAnimation = { value: 'start', x: 10, y: 10 };

应该是：

moveAnimation = { value: 'start', params: {x: 10, y: 10 });

---

你读过吗？你介意分享你使用的css吗？我正在尝试修补这个，拥有它会很有帮助的@MichaelSolati更新了问题。谢谢。你读过了吗？你介意分享你使用的css吗？我正在尝试修补这个，拥有它会很有帮助的@MichaelSolati更新了问题。谢谢你，谢谢你，迈克尔，谢谢你，迈克尔。