Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design

Vorwort

Solche Spezialeffekte sollte man oft sehen. Das ist doch ziemlich cool, oder?

Dies ist der häufigste Spezialeffekt in Google Material Design . Es gibt auch viele vorgefertigte JS-Bibliotheken auf dem Markt, um diesen Spezialeffekt zu simulieren. Allerdings ist es oft notwendig, viel js und css einzuführen. Tatsächlich möchten Sie in einem bestehenden Projekt vielleicht nur eine solche Schaltfläche hinzufügen, um die Benutzererfahrung zu verbessern. Diese js -Bibliotheken scheinen etwas zu groß zu sein. Gleichzeitig müssen Sie, da sie von js implementiert werden, oft auf Ladeprobleme achten.

Gibt es also eine Möglichkeit, diesen Effekt mit css zu erzielen?

Ideen

Tatsächlich handelt es sich um eine Animation, bei der ein perfekter Kreis von klein nach groß wächst. Dies lässt sich mithilfe der Animation in css3 ganz einfach erreichen.

Beispielcode

@keyframes welligkeit{
    aus {
        transformieren: Skalierung(0);
        Deckkraft: 1;
    }
    Zu {
        transformieren: Skalierung(1);
        Deckkraft: 0;
    }
}

Die Implementierung mit js ist normalerweise sehr einfach: Fügen Sie dem Klickelement eine class hinzu und entfernen Sie die class nach dem Ende der Animation.

Beispielcode

var btn = document.getElementById('btn');
btn.addeventlistener('klicken',Funktion(){
  Klasse hinzufügen(btn,'animieren')
},FALSCH)
btn.addeventlistener('transitionend',function(){//Auf das Ende der CSS3-Animation warten removeClass(btn,'animate')
},FALSCH)

Wie kann man also die Animation über CSS auslösen?

CSS-Implementierung

Die Pseudoklassen, die in css mit der Maus interagieren, sind hauptsächlich

• hover die Maus über
• :active Maus gedrückt
• :focus Fokus Mausfokus
• :checked Maus ausgewählt

In vielen Fällen werden die Effekte auf unseren Seiten durch hover erzielt. Das Platzieren der Maus auf der Seite löst einen Effekt aus und das Verlassen der Seite stellt den Effekt wieder her. Wenn Sie die Seite jedoch unmittelbar nach dem Platzieren der Maus auf der Seite verlassen, wird die Animation sofort beendet.

Lass es uns zuerst versuchen.

Struktur

Dies ist die Seitenstruktur und der Stil, den wir geschrieben haben

<Stil>
.btn{ 
  Anzeige: Block; 
  Breite: 300px; 
  Umriss: 0; 
  Überlauf: versteckt;  
  Position: relativ; 
  Übergang: .3s; 
  Cursor: Zeiger; 
  Benutzerauswahl: keine; 
  Höhe: 100px; 
  Textausrichtung: zentriert; 
  Zeilenhöhe: 100px; 
  Schriftgröße: 50px; 
  Hintergrund: Tomate; 
  Farbe: #fff;  
  Rahmenradius: 10px;
}
</Stil>
<a class="btn">Schaltfläche</a>

Sehr einfach, nur ein gewöhnlicher Knopfstil

Als nächstes fügen wir der Schaltfläche den perfekten Kreis hinzu, den wir benötigen.

Wir verwenden Pseudoelemente, um dies zu erreichen

.btn:nach{
    Inhalt: '';
    Position: absolut;
    Breite: 100 %;
    Polsterung oben: 100 %;
    Hintergrund: transparent;
    Randradius: 50 %;
    links: 50%;
    oben: 50 %;
    transformieren: übersetzen(-50 %,-50 %)
}

Entfernen wir overflow: hidden und verkleinern wir den Kreis, um den Effekt zu sehen.

Dann schreiben wir eine Skalierungsanimation

@keyframes welligkeit{
    aus {
        transformieren: übersetzen (-50 %, -50 %), skalieren (0);
        /**Da wir das Transformationsattribut standardmäßig geschrieben haben, müssen wir hier „translate(-50%,-50%)“ hinzufügen, sonst wird es ersetzt**/
        Hintergrund: rgba(0,0,0,.25);
    }
    Zu {
        transformieren: übersetzen(-50 %,-50 %) Skalierung(1);
        Hintergrund: transparent;
    }
}

Kleines interaktives Hover-Erlebnis

Versuchen Sie, mit der Maus darüber zu fahren?

.btn:hover:nach{
  Animation: Welligkeit 1 s;
} 

Der Effekt ist gut, allerdings wird bei zu schneller Mausbewegung der gerade vergrößerte Kreis sofort wieder verkleinert, was etwas inkonsistent ist.

Dies ist jedoch nicht der gewünschte Effekt. Wir hoffen, dass es einmal pro Klick ausgelöst wird, anstatt es einfach dort zu platzieren und nie wieder auszulösen.

aktiv versuchen

In der täglichen Arbeit wird active recht häufig verwendet, normalerweise für Klickeffekte. Warum also nicht einmal ausprobieren?

.btn:aktiv:nach{
  Animation: Welligkeit 1 s;
} 

Der Effekt ist auch unbefriedigend, ein bisschen wie beim Gedrückthalten der Maus, man muss die Maus gedrückt halten, um ihn vollständig auszulösen. Im obigen Beispiel läuft die Animation beispielsweise 1s lang, also muss man 1s lang auf die Schaltfläche klicken, um den vollständigen Animationseffekt zu sehen. Andernfalls wird die Animation, genau wie oben beim Weglassen der Maus, sofort wieder zurückgefahren.

Fokus Erfahrung

Wenn Sie einem Element den Fokus geben müssen, können Sie ihm ein tabindex Attribut zuweisen.

<a class="btn" tabindex="1">Schaltfläche</a>

.btn:Fokus:nach{
  Animation: Welligkeit 1 s;
} 

foucs kann auch ausgelöst werden, aber er kann erst wieder ausgelöst werden, wenn der Fokus verloren geht. Die tatsächliche Betriebsleistung besteht darin, dass Sie nach einem Klick erneut auf den leeren Bereich außerhalb klicken.

Gibt es keine Lösung?

Natürlich gibt es welche, das letzte ist definitiv die Lösung, hahaha

geprüft

checked kann nicht direkt ausgelöst werden. Es wird ausgelöst, nachdem das Formularelement ausgewählt wurde. Aus diesem Grund müssen wir die Seitenstruktur ändern.

<label Klasse="btn">
  <input type="checkbox"><span>Schaltfläche</span>
</Bezeichnung>

Wir haben hier lable gewechselt und das Tag input[type=checkbox] eingefügt, hauptsächlich um input Eingabeauswahl auszulösen, wenn auf die Schaltfläche geklickt wird.

Verleihen Sie etwas Stil

.btn>span:nach{
  /**Ändern Sie den Selektor**/
}
.btn>Eingabe[Typ=Kontrollkästchen]{
  Anzeige: keine
}
.btn>Eingabe[Typ=Kontrollkästchen]:aktiviert+span:nach{
  Animation: Welligkeit 1 s;
}

Dies kann auch die Animation auslösen, das Problem besteht jedoch darin, dass die Auswahl aufgehoben wird, wenn Sie erneut klicken. Wie kann ich die Animation auslösen?

Tatsächlich kann dies erreicht werden mit :not

.btn>Eingabe[Typ=Kontrollkästchen]:nicht(:aktiviert)+span:nach{
  Animation: Welligkeit 1 s;
}

Auf den ersten Blick scheint dies recht clever zu sein, aber wenn man genauer darüber nachdenkt, hat dies, da die Animation sowohl auf der Vorder- als auch auf der Rückseite geschrieben ist, nichts mit :checked zu tun? Es ist besser, direkt zu gehen

.btn>Eingabe[Typ=Kontrollkästchen]+span:nach{
  Animation: Welligkeit 1 s;
}

Unendlicher Kreislauf...

Dieses Problem hat mich lange Zeit geplagt, aber Gott wird diejenigen, die hart arbeiten, nicht im Stich lassen. Später habe ich versucht, verschiedene Animationen in zwei Zuständen auszulösen, und sie können wie folgt separat ausgelöst werden

.btn>Eingabe[Typ=Kontrollkästchen]:aktiviert+span:nach{
  Animation: Welle1 1 s;
}
.btn>Eingabe[Typ=Kontrollkästchen]:nicht(:aktiviert)+span:nach{
  Animation: Welligkeit2 1s;
}

Dies sollte leicht zu verstehen sein.

Jetzt kommt der Punkt. Wenn wir jetzt den Animationsprozess in ripple1 und ripple2 auf den gleichen ändern, können sie separat ausgelöst werden. Mit anderen Worten, solange die Animationsnamen unterschiedlich sind, behandelt CSS sie als unterschiedliche Animationen.

Das ist ganz einfach. Wir müssen nur einen Standardzustand festlegen, einen Zustand auswählen und dann Animationen mit unterschiedlichen Namen auslösen.

.btn>Eingabe[Typ=Kontrollkästchen]+span:nach{
  Animation: Ripple-in 1 s;
}
.btn>Eingabe[Typ=Kontrollkästchen]:aktiviert+span:nach{
  Animation: Wellenform 1 s;
}
@keyframes ripple-in{
    aus {
        transformieren: übersetzen (-50 %, -50 %), skalieren (0);
        Hintergrund: rgba(0,0,0,.25);
    }
    Zu {
        transformieren: übersetzen(-50 %,-50 %) Skalierung(1);
        Hintergrund: transparent;
    }
}
@keyframes ripple-out{/*nur der Name ist anders*/
    aus {
        transformieren: übersetzen (-50 %, -50 %), skalieren (0);
        Hintergrund: rgba(0,0,0,.25);
    }
    Zu {
        transformieren: übersetzen(-50 %,-50 %) Skalierung(1);
        Hintergrund: transparent;
    }
}

Der Effekt ist wie am Anfang des Artikels gezeigt, perfekt

Die komplette Demo ist wie folgt

https://codepen.io/xboxyan/pen/Jmvyex/

Einige Mängel

Da der obige Animationsstil standardmäßig ausgelöst wird, sehen Sie die Wassertropfenanimation auf der Schaltfläche einmal, wenn die Seite geladen wird. Dies ist jedoch nicht besonders auffällig und akzeptabel.

Zweitens besteht der eigentliche Effekt definitiv darin, sich vom Punkt aus auszubreiten, an dem die Maus geklickt wird. Unser CSS kann dies sicherlich nicht und kann sich nur vom Zentrum aus ausbreiten, was ebenfalls ein Kompromiss ist. Hier ist eine Idee. Sie können css Variablen verwenden und die entsprechenden Werte bei jedem Klick im style speichern, sodass sie auch in css verwendet werden können.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.