Animationen

Technologiewahl

Animationen werden oft verwendet, um Anwendungen lebendiger wirken zu lassen. Heutzutage bieten Browser eine gute Unterstützung für CSS-Animationen, und es gibt verschiedene Bibliotheken, die schnelle JavaScript-basierte Animationen bereitstellen. Es gibt auch eine kommende Web API und ein Polyfill, falls Sie gerne die neuesten Technologien ausprobieren möchten.

Mithril.js bietet keine eigenen Animations-APIs, da die genannten Alternativen mehr als ausreichend sind, um aufwendige, komplexe Animationen zu realisieren. Mithril.js stellt jedoch Hooks bereit, um in bestimmten Fällen die Arbeit zu erleichtern, in denen es traditionell schwierig ist, Animationen zu implementieren.

Animation bei der Erstellung von Elementen

Das Animieren eines Elements über CSS bei dessen Erstellung ist denkbar einfach. Fügen Sie einfach eine Animation wie gewohnt zu einer CSS-Klasse hinzu:

.fancy {
  animation: fade-in 0.5s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

var FancyComponent = {
  view: function () {
    return m('.fancy', 'Hello world');
  },
};

m.mount(document.body, FancyComponent);

Animation bei Elemententfernung

Das Problem beim Animieren vor dem Entfernen eines Elements besteht darin, dass wir warten müssen, bis die Animation abgeschlossen ist, bevor wir das Element tatsächlich entfernen können. Glücklicherweise bietet Mithril.js den onbeforeremove Hook, mit dem wir das Entfernen eines Elements verzögern können.

Erstellen wir eine exit-Animation, die die opacity von 1 auf 0 reduziert (ausblendet).

.exit {
  animation: fade-out 0.5s;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Erstellen wir nun eine Beispielkomponente, die die im vorherigen Abschnitt erstellte FancyComponent anzeigt und ausblendet:

var on = true;

var Toggler = {
  view: function () {
    return [
      m(
        'button',
        {
          onclick: function () {
            on = !on;
          },
        },
        'Toggle'
      ),
      on ? m(FancyComponent) : null,
    ];
  },
};

Ändern wir FancyComponent, damit sie beim Entfernen ausgeblendet wird:

var FancyComponent = {
  onbeforeremove: function (vnode) {
    vnode.dom.classList.add('exit');
    return new Promise(function (resolve) {
      vnode.dom.addEventListener('animationend', resolve);
    });
  },
  view: function () {
    return m('.fancy', 'Hello world');
  },
};

vnode.dom verweist auf das Root-DOM-Element der Komponente (<div class="fancy">). Hier verwenden wir die classList-API, um dem <div class="fancy"> die Klasse exit hinzuzufügen.

Anschließend geben wir ein Promise zurück, das erfüllt wird, wenn das animationend-Ereignis ausgelöst wird. Wenn wir ein Promise von onbeforeremove zurückgeben, wartet Mithril.js, bis das Promise aufgelöst ist, bevor es das Element entfernt. In diesem Fall wartet es, bis die Ausblendanimation beendet ist.

Wir können überprüfen, ob sowohl die Enter- als auch die Exit-Animation funktionieren, indem wir die Toggler-Komponente mounten:

m.mount(document.body, Toggler);

Beachten Sie, dass der onbeforeremove-Hook nur für das Element ausgelöst wird, das seinen parentNode verliert, wenn es vom DOM getrennt wird. Dieses Verhalten ist beabsichtigt und soll eine potenziell störende Benutzererfahrung verhindern, bei der jede denkbare Exit-Animation auf der Seite bei einer Routenänderung bei einer Routenänderung ausgeführt würde. Wenn Ihre Exit-Animation nicht ausgeführt wird, stellen Sie sicher, dass Sie den onbeforeremove-Handler so hoch im Baum anbringen, wie es sinnvoll ist, damit Ihr Animationscode aufgerufen wird.

Performance

Für Animationen wird empfohlen, nur die CSS-Regeln opacity (Deckkraft) und transform zu verwenden, da diese von modernen Browsern hardwarebeschleunigt werden können und eine bessere Leistung erzielen als das Animieren von top, left, width und height.

Es wird auch empfohlen, die box-shadow-Regel und Selektoren wie :nth-child zu vermeiden, da dies ebenfalls ressourcenintensiv ist. Wenn Sie einen box-shadow animieren möchten, sollten Sie die box-shadow-Regel auf ein Pseudo-Element anwenden und stattdessen die Deckkraft dieses Elements animieren. Andere Faktoren, die die Performance beeinträchtigen können, sind große oder dynamisch skalierte Bilder und überlappende Elemente mit unterschiedlichen position-Werten (z. B. ein absolut positioniertes Element über einem festen Element).