Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.

Vorwort

Als intensiver Benutzer von Front-End-Frameworks werde ich bei der Auswahl der Technologie großen Wert auf deren Ökologie und Integrität legen. Ich habe Projekte entwickelt, die auf Frameworks wie Vue, React, Angular usw. basieren, darunter ausgereifte UI-Frameworks wie ElementUI, Ant-Design-Vue, iView im Vue-Ökosystem und Ant-Design, MaterialUI im React-Ökosystem. Diese UI-Frameworks von Drittanbietern haben die Kosten und Komplexität der Entwicklung eines Projekts erheblich reduziert, sodass sich Entwickler stärker auf die Realisierung von Geschäftslogik und Service konzentrieren können.

Mit der zunehmenden Betonung der Benutzererfahrung, der Verbesserung der Anforderungen an die interaktive Erfahrung und der Entstehung neuer Standards wie CSS3 ist das Web jedoch brillanter geworden und die Implementierung verschiedener Animationen ist sehr einfach geworden. Als ich das MaterialUI-Framework studierte, war ich von seiner Interaktion begeistert. Um eine Button-Klick-Animation ähnlich wie MaterialUI zu implementieren und in meine eigene UI-Bibliothek einzubinden, habe ich einige Ideen speziell zusammengefasst und hoffe, sie mit der großen Zahl von Front-End-Ingenieuren diskutieren zu können.

Text

Schauen wir uns zunächst den Klickeffekt von materialUI an:

Im Wesentlichen nutzt es auch die Eigenschaften der CSS3-Animation. Ich habe den Quellcode überprüft und festgestellt, dass materialUI durch Klicken je nach Klickposition an verschiedenen Positionen animiert wird, was ziemlich interessant ist. Lassen Sie uns zunächst nicht über ein so kompliziertes Beispiel sprechen. Lassen Sie uns die CSS3-Lösung verwenden, um einen ähnlichen Effekt zu erzielen. Der vom Autor erzielte Effekt ist wie folgt:

Das obige Bild zeigt eine Button-Komponente, die ich basierend auf React gekapselt habe. Lassen Sie uns diese also Schritt für Schritt implementieren.

1. Grundsatz

Das Prinzip dieser Animation ist eigentlich sehr einfach. Es wird die Übergangsanimation von CSS3 und das Pseudoobjekt ::after verwendet, um dies zu erreichen. Beim Klicken aktiviert das Element die Pseudoklasse :active. Dann können wir den Hintergrund auf dem Pseudoobjekt ::after basierend auf dieser Pseudoklasse animieren. Der Pseudocode lautet wie folgt:

.xButton { 
  Position: relativ; 
  Überlauf: versteckt; 
  Anzeige: Inline-Block; 
  Polsterung: 6px 1em; 
  Rahmenradius: 4px; 
  Farbe: #fff; 
  Hintergrundfarbe: #000; 
  user-select:none; // Verhindert, dass Benutzer den Cursor auswählen: Zeiger; 
} 
 
.Welle { 
  &::nach { 
    Inhalt: ""; 
    Anzeige: Block; 
    Position: absolut; 
    Breite: 100 %; 
    Höhe: 100%; 
    oben: 0; 
    links: 0; 
    Hintergrundbild: radialer Farbverlauf (Kreis, #fff 10 %, transparent 11 %); 
    Hintergrundwiederholung: keine Wiederholung; 
    Hintergrundposition: 50 %; 
    transformieren: Skalierung(12, 12); 
    Deckkraft: 0; 
    Übergang: Transformation .6s kubisch-bezier(.75,.23,.43,.82), Opazität .6s; 
  } 
  &:aktiv::nach { 
    transformieren: Skalierung(0, 0); 
    Deckkraft: .5; 
  } 
}

Der obige Code implementiert die Wasserwellenanimation, indem er den Maßstab und die Transparenz der Transformation festlegt und ein radiales Hintergrundbild mit Farbverlauf einstellt. Um eine elegantere Animation zu erzielen, kann die obige CSS-Animation mithilfe des Online-Tools cubic-bezier implementiert werden, das verschiedene Formen von Bézierkurven erzeugen kann. Das Tool sieht folgendermaßen aus:

2. Ideen für das Komponentendesign

Obwohl der obige Code einen Animationseffekt durch Klicken auf eine Schaltfläche erzielen kann, ist er nicht universell und entspricht nicht dem Stil eines erfahrenen Programmierers. Daher werden wir ihn Schritt für Schritt in eine universelle Schaltflächenkomponente kapseln, damit er überall verwendet werden kann.

Die Designidee der Komponente basiert auf dem Ant-Design-Modell. Basierend auf dem Öffnungs- und Schließprinzip wissen wir, dass eine erweiterbare Schaltflächenkomponente im Allgemeinen die folgenden Eigenschaften aufweist:

• Benutzern erlauben, Schaltflächenstile zu ändern
• Offenlegen von Schaltflächenereignismethoden für die Außenwelt
• Konfigurieren Sie das Design und Erscheinungsbild der Schaltfläche
• Steckbar und kombinierbar. Basierend auf den oben genannten Punkten entwerfen wir diese Reaktionskomponente.

3. Spezifische Implementierung der Schaltflächenkomponente basierend auf React und CSS3

Zunächst werden unsere Komponenten mithilfe von React implementiert. Aus technischen Gründen werde ich das beliebtere UMI-Gerüst, die Classnames-Bibliothek und das CSS-Modul verwenden. Der Code ist sehr einfach. Werfen wir einen Blick darauf.

Klassennamen aus „Klassennamen“ importieren 
Stile aus „./index.less“ importieren 
 
/** 
 * @param {onClick} func Extern verfügbar gemachtes Klickereignis * @param {className} string Benutzerdefinierter Klassenname * @param {type} string Schaltflächentyp primär | Warnung | Info | Standard | pur 
 * @param {shape} Zeichenfolge Schaltflächenform Kreis | Radius (Standard) 
 * @param {block} Boolesche Schaltflächenanzeige true | false (Standard) 
 */ 
Standardfunktion Button(props) exportieren { 
  let { untergeordnete Elemente, beim Klicken, Klassenname, Typ, Form, Block } = Requisiten 
  return <div 
            Klassenname = {Klassennamen (styles.xButton, styles.ripple, styles[Typ], styles[Form], Block? styles.block: '', Klassenname)} 
            beiKlick={beiKlick} 
        > 
            { Kinder } 
        </div> 
}

Dies ist der JS-Teil der Schaltfläche, der auch den Kern des Komponentendesigns bildet. Die Schaltflächenkomponente stellt Eigenschaften wie onCpck, className, type, shape und block bereit. className wird verwendet, um den Komponentenklassennamen zu ändern und so den Komponentenstil zu steuern. type wird hauptsächlich verwendet, um den Stil der Komponente zu steuern, ähnlich dem primären Stil von antd. shape wird verwendet, um zu steuern, ob es sich um eine runde oder abgerundete Schaltfläche handelt. block wird verwendet, um zu steuern, ob die Schaltfläche ein Block ist. Die spezifische Form ist wie folgt:

Das optimierte CSS sieht folgendermaßen aus:

.xButton { 
  Box-Größe: Rahmenbox; 
  Anzeige: Inline-Block; 
  Polsterung: 6px 1em; 
  Rahmenradius: 4px; 
  Farbe: #fff; 
  Schriftfamilie: erben; 
  Hintergrundfarbe: #000; 
  user-select:none; // Verhindert, dass Benutzer den Cursor auswählen: Zeiger; 
  Textausrichtung: zentriert; 
  &.primär { 
    Hintergrundfarbe: #09f; 
  } 
  &.warnung { 
    Hintergrundfarbe: #F90; 
  } 
  &.info { 
    Hintergrundfarbe: #C03; 
  } 
  &.rein { 
    Rand: 1px durchgezogen #ccc; 
    Farbe: rgba(0, 0, 0, 0,65); 
    Hintergrundfarbe: #fff; 
    &::nach { 
      Hintergrundbild: radialer Farbverlauf (Kreis, #ccc 10 %, transparent 11 %); 
    } 
  } 
 
  // Form&.Kreis { 
    Rahmenradius: 1,5em; 
  } 
 
  // An das übergeordnete Element anpassen&.block { 
    // Breite: 100 %; 
    Anzeige: Block; 
  } 
} 
 
.Welle { 
  Position: relativ; 
  Überlauf: versteckt; 
  &::nach { 
    Inhalt: ""; 
    Anzeige: Block; 
    Position: absolut; 
    Breite: 100 %; 
    Höhe: 100%; 
    oben: 0; 
    links: 0; 
    Zeigerereignisse: keine; 
    Hintergrundbild: radialer Farbverlauf (Kreis, #fff 10 %, transparent 11 %); 
    Hintergrundwiederholung: keine Wiederholung; 
    Hintergrundposition: 50 %; 
    transformieren: Skalierung(12, 12); 
    Deckkraft: 0; 
    Übergang: Transformation 0,6 s, Deckkraft 0,6 s; 
  } 
  &:aktiv::nach { 
    transformieren: Skalierung(0, 0); 
    Deckkraft: .3; 
    //Den anfänglichen Zustandsübergang festlegen: 0s; 
  } 
}

Wir erreichen das Umschalten der Schaltflächenstile vollständig durch die Nutzung der hohen Flexibilität des CSS-Moduls, das die Attribute und Klassennamen eng miteinander verknüpft. Als Nächstes sehen wir uns an, wie man es verwendet!

// index.js 
importiere { Button } aus '@/components' 
Stile aus „./index.css“ importieren 
exportiere Standardfunktion() { 
  zurückkehren ( 
    <div Klassenname={styles.normal}> 
      <Button className={styles.btn}>Standard</Button> 
      <Button className={styles.btn} type="warning">Warnung</Button> 
      <Button className={styles.btn} type="primary">primär</Button> 
      <Button className={styles.btn} type="info">info</Button> 
      <Button className={styles.btn} type="pure">rein</Button> 
      <Button className={styles.btn} type="primary" shape="circle">Kreis</Button> 
      <Button className={styles.mb16} type="primary" block>primär&block</Button> 
      <Button Typ="Warnung" Form="Kreis" Block beiKlick={() => { Warnung('Block')}}>Kreis&Block</Button> 
    </div> 
  ) 
}

Die zuvor gezeigten Schaltflächenstile wurden durch den obigen Code generiert. Ist das nicht einfach? Schauen wir uns den Klickeffekt noch einmal an:

Tatsächlich ist es nicht nur React. Wir können dasselbe Prinzip verwenden, um eine Vue-Version einer Schaltflächenkomponente oder eine Angular-Version einer Komponente zu implementieren. Es wird nur Syntax. Solche Ideen und Elemente des Komponentendesigns werden offiziell in vielen UI-Bibliotheken verwendet, wie z. B. das Single-Responsibility-Prinzip, das Öffnen- und Schließen-Prinzip von Komponenten, Dezentralisierung, Zusammensetzbarkeit usw. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird, Komponenten zu entwerfen.

Dies ist das Ende dieses Artikels über die Verwendung von reinem CSS zum Erstellen einer MaterialUI-ähnlichen Schaltflächenanimation und deren Einkapselung in eine React-Komponente. Weitere verwandte CSS-MaterialUI-Schaltflächenanimationsinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!