Angualr 2动画:移动图像流畅
问题描述:
我把图像在我的角度2组件的HTML,我想单击它时,它移动到另一个位置在屏幕上。Angualr 2动画:移动图像流畅
<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位置之间的图像获得罚球般的动画?
目前它只是出现在新的地方,很无聊。
答
问题在于将状态和关键字组合在一起,即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 = "";
提供plunker :) –
@Kinduser我真的不知道如何工作的戕plunker和进口我需要什么,真正的问题是用我所有的代码描述 – TheUnreal