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 = "";