Angular 2动画:平滑移动图像

时间:2017-02-17 14:19:33

标签: angular animation css-animations

我在我的有角度的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位置之间平滑移动图像以获得类似投影的动画?

目前,它只是以新的方式出现在新的地方。

1 个答案:

答案 0 :(得分:1)

问题是将 null void 状态和关键字结合起来。

您可以执行类似

的操作
  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 = "";