Frontender Libs - обзор библиотек JS / CSS

Управление анимациями с помощью AnimationBuilder

AnimationBuilder из модуля animations позволяет создавать анимации в Angular. Он используется для динамического запуска или изменения анимаций на основе логики приложения.

Пример:

import { Component, ElementRef } from '@angular/core';
import { AnimationBuilder, style, animate } from '@angular/animations';

@Component({
  selector: 'app-animation',
  template: `<div #box class="box"></div><button (click)="animate()">Animate</button>`,
  styles: [`.box { width: 100px; height: 100px; background: red; margin-top: 20px; }`]
})
export class AnimationComponent {
  constructor(private builder: AnimationBuilder, private el: ElementRef) {}

  animate() {
    const animation = this.builder.build([
      style({ transform: 'translateX(0)' }),
      animate('1s', style({ transform: 'translateX(300px)' })),
      animate('1s', style({ transform: 'translateX(0)' }))
    ]);
    animation.create(this.el.nativeElement.querySelector('.box')).play();
  }
}

👉 @sWebDev

👍4🔥3

www.tgoop.com/sWebDev/3341

1.09K viewsDec 9, 2024 at 08:11

Управление анимациями с помощью AnimationBuilder

AnimationBuilder из модуля animations позволяет создавать анимации в Angular. Он используется для динамического запуска или изменения анимаций на основе логики приложения.

Пример:

import { Component, ElementRef } from '@angular/core';
import { AnimationBuilder, style, animate } from '@angular/animations';

@Component({
  selector: 'app-animation',
  template: `<div #box class="box"></div><button (click)="animate()">Animate</button>`,
  styles: [`.box { width: 100px; height: 100px; background: red; margin-top: 20px; }`]
})
export class AnimationComponent {
  constructor(private builder: AnimationBuilder, private el: ElementRef) {}

  animate() {
    const animation = this.builder.build([
      style({ transform: 'translateX(0)' }),
      animate('1s', style({ transform: 'translateX(300px)' })),
      animate('1s', style({ transform: 'translateX(0)' }))
    ]);
    animation.create(this.el.nativeElement.querySelector('.box')).play();
  }
}

BY Frontender Libs - обзор библиотек JS / CSS