React UI-Animation leicht gemacht

Was macht UI elegant, sexy und schön? Design ist das erste, was einem in den Sinn kommt. Das moderne Web hat einen langen Weg vor sich! Es ist an der Zeit, die Web-Benutzeroberfläche mit Animationen auf die nächste Stufe zu bringen. Ich habe aufgehört zu zählen, wie oft ich von den schönen Animationen von iOS und Android begeistert war, während die meisten meiner Web-Apps statisch und „langweilig“ bleiben. Statisches Design ist wie ein schönes 👸 auf einem Poster. Es bewegt sich nicht und interagiert nicht mit Ihnen! Animation macht die statische Benutzeroberfläche lebendig und anschaulich.

Kehren Sie zu meiner Erfahrung zurück, das Umschalten (Anzeigen/Verbergen) eines Elements ist eine der häufigsten Aufgaben in der Benutzeroberfläche, die ich lange Zeit wie unten ausgeführt habe … (beschämend)

import React from 'react';

export default function Component ({ isContentReady }) {
    return isContentReady ? <div>Content</div> : null;
}

Ich habe mich langsam von diesem zu CSS entwickelt, um das Umschalten durchzuführen

.wrapper {
  transition: 1s all;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}
import React from 'react';
import styles from './styles.css'

export default function Component ({ isContentReady }) {
    return <div className={styles.wrapper}>
        <span className={isContentReady ? styles.show : styles.hide}>Content</span>
    </div>;
}

Das funktioniert zwar, aber ich habe oft den Überblick verloren, wie der eigentliche Stil aussieht, wenn ich schnell auf den Code schaue. Ich hatte immer das Gefühl, dass dies nicht der beste Ansatz zur Implementierung der Animation ist.

Es sollte eine bessere und einfachere Möglichkeit geben, Animationen in React auszuführen. Also habe ich meine eigene geschrieben. Ich präsentiere Ihnen React-Simple-Animate.

import React from 'react';
import Animate from 'react-simple-animate';

export default function Component ({ isContentReady }) {
    return <Animate 
      play={isContentReady}
      start={{ opacity: 0 }}
      end={{ opacity: 1 }}
    >
      Content
    </Animate>;
}

Eine deklarative und einfache Möglichkeit, Animationen in Reaktion auszuführen. Ich kann den Beginn der Animation und die am Ende der Animation anzuwendenden Stile steuern. Das ist meiner Meinung nach ein gutes Muster. Hurra!

Reagiere einfach animiere

Reagiere einfach animiert 🤘 ist der richtige Weg! Oh ja, es ist mein 2c, der es wert ist, nach Jahren der Verwendung von Open-Source-Software (auch beim ersten Mal) einen Beitrag zur Community zu leisten. Das Ziel ist es, die UI-Animation für React so einfach wie möglich zu machen

Hier sind zwei großartige Beispiele dafür, was ich mit „react-simple-animate“ erreichen konnte:


Während die einfache React-Animation großartig ist, hat sie einige Vor- und Nachteile:

😍 Vorteile:

  • Einfache Animation von Inline-Stil A zu Stil B
  • Deklarativ für Komponentenanimation
  • Erleichtern Sie das Umschalten von Animationen
  • Animationssequenzen unterstützen
  • Keyframe-Animation unterstützen
  • Es ist winzig klein (2,2 KB)

😑 Nachteile:

  • es ist für einfache Animationen gemacht 🤘

Der beste Weg, um zu sehen, wie einfach es ist, es selbst auszuprobieren, was Sie mit der Demo tun können.

Insgesamt hoffe ich, dass „react-simple-animate“ jedem hilft, eine elegantere Benutzeroberfläche mit schönen Animationen zu erstellen, und natürlich danke, dass Sie sich die Zeit genommen haben, dies zu lesen und das Paket auszuprobieren. 🤘