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

AnimationTrigger для создания сложных анимаций

В Angular AnimationTrigger управляет анимациями компонентов, задавая состояния, их изменения и связывая анимации с событиями.

Пример:

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-animated',
  template: `
    <div [@fadeInOut]="isVisible ? 'visible' : 'hidden'" class="box"></div>
    <button (click)="toggle()">Toggle</button>
  `,
  animations: [
    trigger('fadeInOut', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('hidden => visible', [animate('500ms ease-in')]),
      transition('visible => hidden', [animate('300ms ease-out')]),
    ]),
  ],
  styles: [`.box { width: 100px; height: 100px; background: lightblue; margin: 10px; }`],
})
export class AnimatedComponent {
  isVisible = false;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

👉 @sWebDev

👍4

www.tgoop.com/sWebDev/3429

1.26K viewsJan 13 at 07:43

AnimationTrigger для создания сложных анимаций

В Angular AnimationTrigger управляет анимациями компонентов, задавая состояния, их изменения и связывая анимации с событиями.

Пример:

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-animated',
  template: `
    <div [@fadeInOut]="isVisible ? 'visible' : 'hidden'" class="box"></div>
    <button (click)="toggle()">Toggle</button>
  `,
  animations: [
    trigger('fadeInOut', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('hidden => visible', [animate('500ms ease-in')]),
      transition('visible => hidden', [animate('300ms ease-out')]),
    ]),
  ],
  styles: [`.box { width: 100px; height: 100px; background: lightblue; margin: 10px; }`],
})
export class AnimatedComponent {
  isVisible = false;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

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