角度动画 - 每次点击时使 div 向右移动一定量

Question

如何给定角度动画中的 div，使其在每次点击时向右移动一定量（px）？ 这是我想到的演示： https://jsfiddle.net/ergsLju1/23/

jQuery 中的相同示例：

$('button').on('click', function() {
    $('div').animate({ left: '+=25px'  })
});

Answer 1

您可以使用 Angular 动画，但对于此任务，最简单的方法是仅使用 CSS 转换和属性绑定。

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
<button (click)="leftOffset = leftOffset + 25">Move</button>
<div [ngStyle]="{'left': leftOffset + 'px'}">&nbsp;</div>`,
  styles: [
    `
button {
  margin: 15px 0;
}

div {
  background-color: teal;
  width: 100px;
  height: 100px;
  position: relative;
  transition: left 200ms ease;
}
`,
  ],
})
export class App {
  leftOffset = 0;
}

bootstrapApplication(App);

https://stackblitz.com/edit/stackblitz-starters-ukvd4c?file=src%2Fmain.ts