Aurelia - Animationen

In diesem Kapitel erfahren Sie, wie Sie CSS-Animationen im Aurelia-Framework verwenden.

Schritt 1 - Anzeigen

Unsere Ansicht enthält ein Element, das animiert wird, und eine Schaltfläche zum Auslösen des animateElement() Funktion.

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

Schritt 2 - Ansichtsmodell

In unsere JavaScript-Datei werden wir importieren CssAnimatorPlugin und injizieren es als Abhängigkeit. DasanimateElementDie Funktion ruft den Animator auf, um die Animation zu starten. Die Animation wird im nächsten Schritt erstellt.

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

Schritt 3 - Stil

Wir werden CSS innen schreiben styles/styles.css Datei. .myAnimation-add ist der Ausgangspunkt einer Animation während .myAnimation-remove wird aufgerufen, wenn die Animation abgeschlossen ist.

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

Sobald die ANIMATEWenn Sie auf die Schaltfläche klicken, wird die Hintergrundfarbe von hellblau in einen dunklen Farbton geändert. Wenn diese Animation nach drei Sekunden abgeschlossen ist, wird das Element in den Startzustand versetzt.