Angualr 2動畫：移動圖像流暢

Question

我把圖像在我的角度2組件的HTML，我想單擊它時，它移動到另一個位置在屏幕上。

<img (tap)="toggleThrow()" [@throw]="throw" 
       src="test.png"> 

我添加了下面的動畫觸發器：

trigger('throw', [ 
    state('yes', style({ 
     left: '100px', 
     top: '200px' 
     })), 
     transition('void => yes', animate('600ms ease-in')), 
     transition('yes => void', animate('600ms ease-in')), 
    ]), 

，按照下述方式之後點擊：

toggleThrow() { 
    if (!this.throw) 
     this.throw = 'yes'; 
    else 
     this.throw = null; 
    } 

每當我點擊圖像，圖像改變位置。問題在於，它實際上在一個地方散開，出現在第二個地方，而不是從一個地方逐個像素地優雅地移動到另一個地方。

我怎麼能平滑移動X和Y位置之間的圖像獲得罰球般的動畫？

目前它只是出現在新的地方，很無聊。

Answer 1

問題在於將狀態和關鍵字組合在一起，即null和。

你可以做類似

state('yes', style({ 
    left: '100px', 
    top: '200px' 
    })), 
    transition('* => yes', animate('600ms ease-in')), 
    transition('yes => *', animate('600ms ease-in')), 
]) 

而且

if (!this.throw) this.throw = 'yes'; 
    else this.throw = "";