代码之家  ›  专栏  ›  技术社区  ›  Hikmat G.

如何使用角度动画始终向一个方向移动?

  •  0
  • Hikmat G.  · 技术社区  · 6 年前

    我正在尝试使用角度动画将元素向左移动 20px 20像素 向左。并在单击按钮时继续向左移动。这是我当前的动画。

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

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

    onMove() {
      this.direction = 'left';
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   lietutis Shannon    6 年前

    如果我理解正确的话,如果不以编程方式运行这种动画,你就不能做这样的事情,因为在动画开始的那一刻,你不能设置当前/新的translateX位置并继续前进。。。但如果以编程方式执行此操作,则可以设置当前位置:

    允许设置可见样式:

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

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

    和typescript:(animationBuilder: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;
    }