如何在Angular 6中创建震动动画？

Question

我们如何使用Angular 6动画创建摇动动画？该动画应看起来像是“摇动”动画Animate.css

Answer 1

This is a little bit tricky, if you want to apply the animation to several elements within one component in Angular 6:

app.component.html:

<p [@shakeit]="this.states['state1']" (click)="shakeMe('state1')" (@shakeit.done)="shakeEnd('state1', $event)">Click me</p>

<p [@shakeit]="this.states['state2']" (click)="shakeMe('state2')" (@shakeit.done)="shakeEnd('state2', $event)">Click me</p>

app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('shakeit', [
        state('shakestart', style({
            transform: 'scale(1)',
        })),
        state('shakeend', style({
            transform: 'scale(1)',
        })),
        transition('shakestart => shakeend', animate('1000ms ease-in',     keyframes([
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.1}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.2}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.3}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.4}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.5}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.6}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.7}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.8}),
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.9}),
        ]))),
  ])]
})
export class AppComponent  {
  states = {};

  constructor() {
    this.states['state1'] = 'shakestart';
    this.states['state2'] = 'shakestart';
  }

  shakeMe(stateVar: string) {
        this.states[stateVar] = (this.states[stateVar] === 'shakestart' ? 'shakeend' : 'shakestart');
  }

  shakeEnd(stateVar: string, event) {
    this.states[stateVar] = 'shakeend';
  }
}

You see, I use a dictionary for the animation states of the different html elements. Therefore, it is a little bit more work and overhead if you want to use Angular 6. shakeMe method starts the animation.

但是，我建议仅使用CSS关键帧，因为它对于多个html元素而言更容易实现。下面的示例执行相同的动画。您只需将正确的CSS类应用于html元素。

<p [@shakeit]="this.states['state1']" (click)="shakeMe('state1')" (@shakeit.done)="shakeEnd('state1', $event)">Click me</p>

<p [@shakeit]="this.states['state2']" (click)="shakeMe('state2')" (@shakeit.done)="shakeEnd('state2', $event)">Click me</p>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('shakeit', [
        state('shakestart', style({
            transform: 'scale(1)',
        })),
        state('shakeend', style({
            transform: 'scale(1)',
        })),
        transition('shakestart => shakeend', animate('1000ms ease-in',     keyframes([
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.1}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.2}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.3}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.4}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.5}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.6}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.7}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.8}),
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.9}),
        ]))),
  ])]
})
export class AppComponent  {
  states = {};

  constructor() {
    this.states['state1'] = 'shakestart';
    this.states['state2'] = 'shakestart';
  }

  shakeMe(stateVar: string) {
        this.states[stateVar] = (this.states[stateVar] === 'shakestart' ? 'shakeend' : 'shakestart');
  }

  shakeEnd(stateVar: string, event) {
    this.states[stateVar] = 'shakeend';
  }
}