Wie Shake Animation in Angular 6 zu schaffen?

stimmen
-2

Wie können wir eine Shake Animation mit Angular 6 Animationen erstellen? Die Animation sollte aussehen wie ‚Shake‘ Animation inAnimate.css

Veröffentlicht am 20/10/2018 um 12:35
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
4

Dies ist ein wenig kompliziert, wenn Sie die Animation auf mehrere Elemente innerhalb einer Komponente in Angular 6 anwenden möchten:

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';
  }
}

Sie sehen, ich verwende ein Wörterbuch für die Animationszustände der verschiedenen HTML - Elemente. Daher ist es ein wenig mehr Arbeit und Aufwand , wenn Sie Angular 6. verwenden möchten shakeMeMethode , um die Animation beginnt.

Allerdings würde ich empfehlen, nur CSS Keyframes zu verwenden, da es einfacher zu realisieren für mehr HTML-Elemente ist. Das folgende Beispiel hat die gleiche Animation. Sie müssen nur die richtige CSS-Klasse auf das HTML-Element anzuwenden.

.shakeit:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
<h2 class="shakeit">Hover me</h2>

Beantwortet am 20/10/2018 um 13:13
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more