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

Angular 2动画：平滑移动图像

1 个答案: