Animációk

Technológiai lehetőségek

Az animációkat gyakran használják az alkalmazások vizuális gazdagítására. A modern böngészők kiválóan támogatják a CSS animációkat, és számos könyvtár is elérhető, amelyek gyors, JavaScript-alapú animációkat kínálnak. Emellett létezik egy készülő Web API és egy polyfill is, ha a legújabb technológiákkal szeretne kísérletezni.

A Mithril.js nem tartalmaz beépített animációs API-kat, mivel a fent említett megoldások több mint elegendőek a komplex animációk megvalósításához. A Mithril.js viszont biztosít ún. "hook"-okat, amelyek megkönnyítik bizonyos animációs feladatok elvégzését, amelyek hagyományosan nehézkesek lehetnek.

Animáció elem létrehozásakor

Egy elem létrehozásakor történő CSS animáció alkalmazása rendkívül egyszerű. Egyszerűen adjon hozzá egy animációt egy CSS osztályhoz a megszokott módon:

.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);

Animáció elem eltávolításakor

Az elem eltávolítása előtti animációval az a kihívás, hogy meg kell várnunk az animáció befejeződését, mielőtt az elemet eltávolítanánk a DOM-ból. Szerencsére a Mithril.js rendelkezik az onbeforeremove hook-kal, amely lehetővé teszi számunkra, hogy késleltessük az elem eltávolítását.

Hozzunk létre egy exit animációt, amely az opacity értékét 1-ről 0-ra csökkenti (kifelé halványítás).

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

Most hozzunk létre egy egyszerű komponenst, amely megjeleníti és elrejti az előző szakaszban létrehozott FancyComponent-et:

var on = true;

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

Ezután módosítsuk a FancyComponent-et úgy, hogy kifelé halványuljon, amikor eltávolítják:

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

A vnode.dom a komponens gyökér DOM elemére mutat (<div class="fancy">). A classList API-t használjuk itt, hogy hozzáadjunk egy exit osztályt a <div class="fancy"> elemhez.

Ezután visszaadunk egy Promise-t, amely akkor teljesül, amikor az animationend esemény bekövetkezik. Amikor egy Promise-t adunk vissza az onbeforeremove-ból, a Mithril.js megvárja, amíg a Promise teljesül, és csak azután távolítja el az elemet. Ebben az esetben megvárja, amíg a kilépési animáció befejeződik.

Ellenőrizhetjük, hogy a belépési és a kilépési animációk megfelelően működnek-e a Toggler komponens csatlakoztatásával:

m.mount(document.body, Toggler);

Fontos megjegyezni, hogy az onbeforeremove hook csak azon az elemen fut le, amely elveszíti a parentNode-ját, amikor egy elemet eltávolítanak a DOM-ból. Ez a viselkedés szándékos, és célja, hogy elkerüljük a zavaró felhasználói élményt, ahol az oldal minden elképzelhető kilépési animációja lefutna egy útvonalváltáskor. Ha a kilépési animáció nem fut le, győződjön meg róla, hogy az onbeforeremove kezelőt olyan magasan csatolja a fához, ahol ez ésszerű, hogy biztosítsa az animációs kód meghívását.

Teljesítmény

Animációk létrehozásakor ajánlott csak az opacity és a transform CSS tulajdonságokat használni, mivel ezeket a modern böngészők hardveresen gyorsíthatják, ami jobb teljesítményt eredményez, mint a top, a left, a width és a height animálása.

Ajánlott továbbá elkerülni a box-shadow tulajdonságot és az olyan szelektortípusokat, mint a :nth-child, mivel ezek is erőforrás-igényesek lehetnek. Ha egy box-shadow-t szeretne animálni, fontolja meg, hogy a box-shadow tulajdonságot egy pszeudo elemre helyezi, és ehelyett az elem átlátszóságát animálja. További erőforrás-igényes megoldások közé tartoznak a nagy vagy dinamikusan méretezett képek és a különböző position értékekkel rendelkező átfedő elemek (pl. egy abszolút pozicionált elem egy fix elem felett).