[angular2]ディレクティブによって要素のCSSが変わるとき、元の状態からトランジションを効かせたい

Question

簡単な例を元に説明させて頂きます。

後述のスクリプトでやっていること

• divは変数x,yによって表示位置が決まる
• hoge()はx,yを書き換える関数（さまざまなタイミングで呼ばれる）
• hoge()によってx,yが変わるたびにdivの表示される位置が変わる

やりたいけどできていないこと

• hoge()によってdivの位置が変わるとき、元の位置からトランジションを効かせたい
• ディレクティブの際、物理的には元のDOMと別物なってしまうので(?)、cssのtransitionは効かない

app.component.ts

export class AppComponent {
  x: number;
  y: number;
  hoge() {
    this.x = ランダムな数字;
    this.y = ランダムな数字;
  }
}

app.component.html

<div [ngStyle]="{ left: x + 'px', top: y + 'px' }"></div>

app.comonent.css

div {
  position: absolute;
  transition: 1s;
}

何かいい案はないでしょうか…？

分かりづらければ補足させて頂きます。
どうかよろしくお願いします。

Answer 1

同じコードを書いて試してみたところ、Angular 4.1.0の環境ではおそらく意図通りのtransitionが行われました。

https://plnkr.co/edit/rFxLe7bhC5RwBwLT0xdB

app.component.cssが正しく読み込まれているかどうか確認したほうが良いかもしれません。

Comments

[n_kitamura]

回答有り難うございます。

なんと！再度試してみます！！

[n_kitamura]

lacoさん、わざわざ試しいただきありがとうございました。とても助かりました。

Answer 2

lacoさんの言う通り問題なく動きました。。

以下、なぜ動かないと思ってしまったのか、ですが。
実際には例よりもう少し複雑で、

class Position {
  x: number;
  y: number;
}

↑のようなオブジェクトを用意して、

postition: Position;
hoge() {
  new_position = new Position;
  new_position.x = 10;
  new_position.y = 10;
  this.position = new_position;
}

更新時に↑のように新しいインスタンスとして代入していました。
これだとtransitionは効かず…。

postition: Position;
hoge() {
  this.position.x = 10;
  this.position.y = 10;
}

としてやると動きました。