如何使用角度动画始终将其向一个方向移动？答案

【问题标题】：How to use angular animations to always move it in one direction?如何使用角度动画始终将其向一个方向移动？
【发布时间】：2018-08-28 04:09:22
【问题描述】：

单击按钮时，我正在尝试使用角度动画将元素向左移动20px。这很容易做到，但是当再次单击按钮时我无法完成移动元素，该元素必须将另一个 20px 向左移动。并在单击按钮时继续向左移动。这是我当前的动画。

const animations = [
  trigger('slide', [
    state('left', style({ transform: 'translateX(-20px)' })),
    transition('* => *', animate(300))
  ])
];

<div [@slide]="direction"></div>

onMove() {
  this.direction = 'left';
}

【问题讨论】：

标签： javascript angular angular-animations

【解决方案1】：

如果我理解正确，如果不以编程方式运行这种动画，你就不能做这样的事情，因为在动画开始时你不能设置当前/新的 translateX 位置并继续前进......但是如果您以编程方式执行此操作，则可以设置当前位置：

让我们设置可见样式：

.moving-left {
  border: 1px solid darkblue;
  background-color: lightblue;
  padding: 10px;
  margin: 10px 0;
  width: 500px;
  margin: auto;
}

一些html：

<div class="moving-left" #moveLeft></div>
<button (click)="onMove(moveLeft)"> Move Left </button>

和打字稿：（animationBuilder：从'@angular/animations'导入的AnimationBuilder）

left = 0;
onMove(element: any) {
  const animation = this.animationBuilder.build([
    style({
      transform: `translateX(-${this.left}px)`
    }),
    animate(300, style({
      transform: `translateX(-${this.left + 20}px)`
    }))
  ]);

  const player = animation.create(element);
  player.play();
  this.left += 20;
}

【讨论】：

谢谢，我不知道AnimationBuilder。我试试这个