CSS implementiert die Funktion zum Ausblenden des Suchfelds (Animation in Vorwärts- und Rückwärtssequenz).

Das Platzieren eines Suchfelds in der oberen Menüleiste ist ein gängiges Szenario. Wenn die Suchfunktion jedoch nicht so häufig verwendet wird und der Inhalt in der Menüleiste bereits überfüllt ist, sieht die Platzierung eines vollständigen Suchfelds dort nicht so schön aus. Daher besteht eine gängige Vorgehensweise darin, nur ein Suchsymbol einzufügen und das gesamte Suchfeld bei Bedarf anzuzeigen, wie in der folgenden Abbildung dargestellt:

Umsetzungsideen

Das Suchfeld wird im Anfangszustand nicht angezeigt. Es gleitet von rechts hinein, wenn die Maus hineinbewegt. Daher können die Attribute „hidden“ oder „transparent“ des Suchfelds selbst nicht verwendet werden. Es ist erforderlich overflow: hidden des übergeordneten Elements zu verwenden, um es auszublenden und das Eingabefeld aus dem Anzeigebereich des übergeordneten Elements zu verschieben und es bei Bedarf wieder zurückzuverschieben.

Es gibt zwei Möglichkeiten, Animationseffekte in CSS zu erzielen: transition und animation . Da es hier nur zwei einfache Effekte gibt: Das Suchfeld bewegt sich und die Symboltransparenz ändert sich, reicht transition aus.

Die Implementierung dieser beiden Animationen ist einfach, es gibt jedoch einige kleine Details:

• Die beiden Animationen werden nicht gleichzeitig, sondern nacheinander ausgeführt. Um die Abfolge der beiden Effekte zu erreichen, müssen Sie transition-delay verwenden.
• Die beiden Vorgänge des Einblendens und Ausblendens scheinen identisch zu sein, bei genauerem Hinsehen fällt jedoch auf, dass die Reihenfolge der Animationen unterschiedlich ist: Beim Einblenden verschwindet zuerst das Symbol und das Suchfeld rückt ein, beim Ausblenden rückt zuerst das Suchfeld aus und das Symbol erscheint später. Daher ist eine separate Einstellung erforderlich.

Code-Implementierung

Das vollständige Stylesheet ist am Ende des Artikels angehängt. Wenn Sie die spezifischen Ideen nicht lesen möchten, können Sie diesen Abschnitt überspringen und direkt kopieren.

Grundstil

Beginnen wir mit einigen grundlegenden Stilen. Die hier verwendeten Symbole sind Materialdesignsymbole.

<div Klasse="Suche">
  <input class="bar" placeholder="Bitte Inhalt eingeben" />
  <span class="material-icons icon">Suche</span>
</div>
.Symbol {
  Breite: 24px;
  Höhe: 24px;
}

.Bar {
  Höhe: 26px;
  Breite: 200px;
  Polsterung: 1px 9px;
  Rand: #fff 1px durchgezogen;
  Rahmenradius: 3px;
  Hintergrundfarbe: transparent;
  Farbe: #fff;
}
::Platzhalter {
  Farbe: #ccc; /* Ändere die Farbe des Platzhalters in der Eingabe*/
}

.suchen {
  Höhe: 30px;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
} 

Suchfeld ausblenden

Es gibt viele Möglichkeiten, das Suchfeld zu verschieben, z. B. durch die Verwendung der absoluten oder relativen Positionierung.

• Wenn das Suchfeld auf absolute position: absolute ), wird das Suchfeld aus dem Eingabestream extrahiert. Einfach ausgedrückt wird das übergeordnete Element so dargestellt, als ob es nicht existiert. Auf diese Weise müssen die Breite des übergeordneten Elements und die Position des Suchsymbols separat angegeben werden.
• Im Gegensatz dazu verschiebt die relative Positionierung ( position: relative ) einfach die Position des Elements ohne Auswirkungen auf andere Elemente und ist daher hier einfacher zu verwenden.

Es gibt auch eine direktere Methode: die Transform-Eigenschaft. Durch diese Eigenschaft können Sie Transformationsvorgänge wie die Verschiebung, Drehung und Skalierung von Elementen durchführen, ohne andere Elemente zu beeinflussen. translateX() verschiebt das Element um eine angegebene Distanz entlang der X-Achse (horizontal). Rein aus der Perspektive der Übersetzung gibt es keinen offensichtlichen Unterschied in den Effekten im Vergleich zur Verwendung der relativen Positionierung.

PS: Ich bin sicher, dass ich nicht der Einzige bin, der den Unterschied zwischen Übergang, Transformation und Übersetzung nicht erkennt.

.suchen {
  Überlauf: versteckt;
}
.Bar {
  transformieren: übersetzenX(224px);
  /* 
    Der vorherige Satz kann auch durch die folgenden beiden Sätze mit derselben Wirkungsposition ersetzt werden: relativ;
    links: 224px;
  */
}

Animationssequenz

Die Animation wird durch die Übergangseigenschaft erreicht. Übergang ist eine Abkürzung für Übergangseigenschaft, Übergangsdauer, Übergangszeitfunktion und Übergangsverzögerung (z. B. border: red 1px solid; ). Die vier Eigenschaften geben jeweils die Eigenschaften, Dauer, Zeitkurve und Verzögerungszeit der Übergangsanimation an.

• Die Eigenschaft ist die Eigenschaft, auf die die Übergangsanimation angewendet wird
• Die Zeitkurve ist die Geschwindigkeitsänderung der Animation, z. B. langsam beginnend, schnell in der Mitte und langsam am Ende. Sie kann besser aussehen und flüssiger sein als eine gleichmäßige Bewegung.
• Die Verzögerungszeit dient dazu, die Animation nach dem Erfüllen der Auslösebedingung für einen bestimmten Zeitraum zu verzögern. Sie kann verwendet werden, um die sequentielle Ausführung mehrerer Animationen zu implementieren.

Das Übergangsattribut ist im Wesentlichen die Flash-Tween-Animation, die wir im Informatikunterricht in der Grundschule gelernt haben. Es gibt den Start- und Endzustand eines Attributs an und vervollständigt automatisch die Übergangsanimation dazwischen. Das ursprüngliche Attribut des Elements ist der Startzustand, die Animation nach dem Darüberbewegen der Maus, und das Pseudoklassenattribut :hover des natürlichen Elements ist der Endzustand.

.Symbol {
  Deckkraft: 1;
  Übergang: Deckkraft 0,3 s, Leichtigkeit; /* Der Standardwert der Verzögerungseigenschaft ist 0 */
}
.Suche:Hover .Symbol {
  Deckkraft: 0;
}

.Bar {
  transformieren: übersetzenX(224px);
  Übergang: Transformation 0,3 s, Ein- und Ausstieg 0,3 s;
}
.Suche:Hover .Bar {
  transformieren: übersetzenX(24px);
}

Umgekehrte Reihenfolge

Dadurch lässt sich zwar grundsätzlich der gewünschte Animationseffekt erzielen, allerdings wird beim Ausblenden des Suchfelds zuerst das Symbol angezeigt und erst nach dem Suchfeld wieder ausgeblendet, was nicht schön genug ist. Die Lösung ist auch sehr einfach: Legen Sie einfach unterschiedliche Verzögerungsattribute für die Hover-Pseudoklasse fest.

Zu beachten ist, dass das Verzögerungsattribut in der Hover-Pseudoklasse der Verzögerung beim Hochbewegen der Maus entspricht und die Verzögerung in den eigenen Attributen des Elements der Verzögerung bei der Fortsetzung der Animation beim Herausbewegen der Maus entspricht. Es ist möglicherweise nicht die gleiche Reaktion wie Ihre erste (aber es macht Sinn, wenn Sie darüber nachdenken). Schreiben Sie es also nicht rückwärts.

.Symbol {
  Übergang: Deckkraft 0,3 s, Leichtigkeit 0,3 s;
}

.Suche:Hover .Symbol {
  Übergangsverzögerung: 0 s;
}

.Bar {
  Übergang: Transformation 0,3 s, Ein- und Ausstieg 0 s;
}

.Suche:Hover .Bar {
  Übergangsverzögerung: 0,3 s;
}

Triggerbereich

Tatsächlich reichen die oben genannten Schritte für den gewünschten Animationseffekt aus. Es gibt jedoch noch ein kleines Problem: Die Animation wird durch den Hover-Zustand des übergeordneten Elements .search ausgelöst. Wenn sich die Maus also nach links neben das Suchsymbol bewegt, wo das Suchfeld sein sollte (aber jetzt ist dort nichts, es ist ausgeblendet), wird trotzdem die Animation zur Anzeige des Suchfelds ausgelöst. Dies ist grundsätzlich nicht unakzeptabel.

Wenn Sie die Animation nur auslösen möchten, wenn die Maus über dem Symbol schwebt, ändern Sie einfach die Auslösebedingung in den Schwebezustand von .icon. Da es in CSS jedoch nur einen Nachfolgerelement-Selektor, aber keinen Vorgängerelement-Selektor gibt (weil das Prinzip der DOM-Rendering-CSS darin besteht, dass kein Backtracking stattfinden kann), müssen Sie die Reihenfolge des Symbols und des Suchfelds in HTML anpassen.

<div Klasse="Suche">
  <span class="material-icons icon">Suche</span>
  <input class="bar" placeholder="Bitte Inhalt eingeben" />
</div>

Ändern Sie dann die entsprechenden Stile und Selektoren.

.icon:hover {
  Deckkraft: 0;
  Übergangsverzögerung: 0 s;
}

.icon:hover + .bar { /* + benachbarter Geschwisterselektor*/
  transformieren: übersetzenX(24px);
  Übergangsverzögerung: 0,3 s;
}

.suchen {
  Anzeige: Flex;
  flex-direction: row-reverse; /* Das Suchfeld weiterhin auf der linken Seite des Symbols platzieren*/
}

Anhang: Vollständiges Stylesheet

<div Klasse="Suche">
  <span class="material-icons icon">Suche</span>
  <input class="bar" placeholder="Bitte Inhalt eingeben" />
</div>
.Symbol {
  Breite: 24px;
  Höhe: 24px;
  Deckkraft: 1;
  Übergang: Deckkraft 0,3 s, Leichtigkeit 0,3 s;
}

.icon:hover {
  Deckkraft: 0;
  Übergangsverzögerung: 0 s;
}

.Bar {
  Höhe: 26px;
  Breite: 180px;
  Polsterung: 1px 9px;
  Rand: #fff 1px durchgezogen;
  Rahmenradius: 3px;
  Hintergrundfarbe: transparent;
  Farbe: #fff;
  transformieren: übersetzenX(224px);
  Übergang: Transformation 0,3 s, Ein- und Ausstieg 0 s;
}

.icon:hover + .bar {
  transformieren: übersetzenX(24px);
  Übergangsverzögerung: 0,3 s;
}

::Platzhalter {
  Farbe: #ccc;
}

.suchen {
  Höhe: 30px;
  Anzeige: Flex;
  Flex-Richtung: Reihe umkehren;
  Elemente ausrichten: zentrieren;
  Überlauf: versteckt;
}

Dies ist das Ende dieses Artikels über die Verwendung von CSS zur Implementierung der Funktion für versteckte Suchfelder (Animation in Vorwärts- und Rückwärtsreihenfolge). Weitere relevante Inhalte zur Vorwärts- und Rückwärtsreihenfolge von CSS-Animationen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!