如何用Angular修改CSS中的动画属性

Answer 1

这是我使用角度动画的解决方案，我们可以将输入传递给角度动画，该变量在

params

属性内保存倒计时持续时间，然后我使用类应用所有其他静态样式，并且可以使用分配动态属性

{{countDown}}s

，通过设置

:increment

和

:decrement

的过渡我们可以重新启动动画！

import { NgStyle } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  animate,
  keyframes,
  style,
  transition,
  trigger,
} from '@angular/animations';

const stylesArr = [
  style({ transform: 'scale(1)', offset: 0 }),
  animate(
    '{{countDown}}s',
    keyframes([
      style({ transform: 'scale(1)', offset: 0 }),
      style({ transform: 'scale(0.5)', offset: 1 }),
    ])
  ),
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgStyle, FormsModule],
  animations: [
    trigger('animate', [
      transition(':increment', stylesArr),
      transition(':decrement', stylesArr),
    ]),
  ],
  template: `
    <div id="countdown">
      <div id="countdown-number">{{ countDown }}</div>
      <svg>
        <circle #circle r="18" cx="20" cy="20" class="needed-styles" [@animate]="{
    value:countDown, params:{
      countDown:countDown,      
    }
  }"></circle>
      </svg>
    </div>
    <input [(ngModel)]="countDown"/>
  `,
  styles: [
    `
      .needed-styles {
          animation-timing-function: linear;
          animation-delay: 0s;
          animation-iteration-count: 1;
          animation-direction: normal;
          animation-fill-mode: forwards;
          animation-play-state: running;
          animation-name: countdown;
          animation-timeline: auto;
          animation-range-start: normal;
          animation-range-end: normal;
      }
  `,
  ],
})
export class App {
  animationToggle = false;
  countDown = 3;
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

Stackblitz 演示