アニメーション入力パラメータをコンポーネントのプロパティにバインドします。4.2.0

Question

アニメーション入力パラメータをコンポーネントプロパティにバインドします。角度4.2.0の新しいアニメーション機能を使用してそれを行う方法はありますか？

は例えば、私は、ユーザーがオブジェクトの座標を設定すると、オブジェクトはそれに応じて移動する必要があります：

マイapp.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'; 
    } 
} 

とapp.component.html：

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> 

そしてapp.component.css

.container { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 

.box { 
    background-color: pink; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    border-radius: 10px; 
    top: 50px; 
    left: 50px; 
} 

Answer 1

私は正直なところだろう、私は角アニメーションライブラリがあなたのための最高のものになるだろうかはわかりません。あなたがそれを使用する方法（パラメータ付き）は、まだoption issueのようです。アニメーションライブラリを使うのではなく、ちょうどいくつかのCSSで同じ仕事をするのはなぜですか？テストできるデモのPlunkerデモを含めました。

コンポーネント

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> 

CSS

.container { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 

.box { 
    background-color: pink; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    border-radius: 10px; 
    transition: all 1s ease; 
} 

Answer 2

私はMichaelSolatiのplunker 01 @に変更には、@angular/animationsを使用して角を表示します。テンプレートで

：コンポーネントで

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

：

animationPlayer; 
    @ViewChild('movebox') moveBoxEl: ElementRef; 
    moveBall() { 
    const moveBallAnimation = this.animBuilder.build([ 
     animate(`1s ease`, style({ 
      'top': `${this.moveInputs.x}px`, 
      'left': `${this.moveInputs.y}px` 
     })) 
    ]); 
    this.animationPlayer = moveBallAnimation.create(this.moveBoxEl.nativeElement); 
    this.animationPlayer.play(); 
    }