Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen

Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen

Im vorherigen Artikel wurde vorgestellt, wie Vue das Zuschneiden, Vergrößern, Verkleinern und Drehen von Bildern realisieren kann. Heute werde ich vorstellen, wie Vue.js die Funktion des Anklickens von Symbolen zum Vergrößern und Verkleinern realisieren kann. Der spezifische Code lautet wie folgt:

@-webkit-keyframes pulse1 {
 aus {
  -webkit-transform: scale3d(1,05, 1,05, 1,05);
  transformieren: scale3d(1,05, 1,05, 1,05);
 }
 
 Zu {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 }
 
 /* Zu {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 } */
}
@keyframes pulse1 {
 aus {
  -webkit-transform: scale3d(1,05, 1,05, 1,05);
  transformieren: scale3d(1,05, 1,05, 1,05);
 }
 
 Zu {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 }
 
 /* Zu {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 } */
}
 
.puls1 {
 -webkit-animation-name: pulse1;
 Animationsname: Puls1;
}
 
@-webkit-keyframes Puls {
 aus {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 }
 
 Zu {
  -webkit-transform: scale3d(1,05, 1,05, 1,05);
  transformieren: scale3d(1,05, 1,05, 1,05);
 }
 
 /* Zu {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 } */
}
 
@keyframes Puls {
 aus {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 }
 
 Zu {
  -webkit-transform: scale3d(1,05, 1,05, 1,05);
  transformieren: scale3d(1,05, 1,05, 1,05);
 }
 
 /* Zu {
  -webkit-transform: scale3d(1, 1, 1);
  transformieren: scale3d(1, 1, 1);
 } */
}
 
.puls {
 -webkit-animation-name: Puls;
 Animationsname: Puls;
}
 
.animieren1 {
 -Webkit-Animationsdauer: 1 s;
 Animationsdauer: 1 s;
 -webkit-animation-fill-mode: beides;
 Animationsfüllmodus: beides;
}

Dies ist das Ende dieses Artikels über den Code von vue.js zum Implementieren des Vergrößerns und Verkleinerns beim Klicken auf ein Symbol. Weitere relevante Inhalte zum Code von vue zum Implementieren des Vergrößerns und Verkleinerns beim Klicken auf ein Symbol 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!

Das könnte Sie auch interessieren:
  • Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)
  • Zwei Möglichkeiten, das Popup-Fenster durch Klicken auf den leeren Bereich in Vue zu schließen
  • Vue implementiert das Klicken auf die aktuelle Zeile, um die Farbe zu ändern
  • Vue3.0 implementiert Click-to-Switch-Verifizierungscode (Komponente) und Verifizierung
  • Detaillierte Erklärung des Ereignisses zum Auslösen von untergeordneten Komponenten durch Klicken auf Schaltflächen in übergeordneten Komponenten in Vue
  • Vue verhindert das Auslösen mehrerer Anfragen nach aufeinanderfolgenden Klicks in einem kurzen Zeitraum
  • Vue implementiert die dynamische Zuweisung von IDs und Klickereignissen, um die ID-Operation des aktuell angeklickten Elements abzurufen
  • Beispiel für die Vue-Implementierung eines Klicks zum Anzeigen des Popup-Fensters
  • Vue verwendet die Tabelle im Ant-Design, um den Ereignisvorgang beim Klicken auf eine Zeile auszulösen
  • Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt

<<:  Ausführliches Tutorial zur Installation von mysql 5.6.23 winx64.zip

>>:  Grafisches Tutorial zur Installation der 64-Bit-Desktopversion von Centos 7

Artikel empfehlen

Tutorial zur grundlegenden Verwendung des MySQL Slow Query Log

Parameter im Zusammenhang mit dem langsamen Abfra...

So legen Sie mit CSS eine Hintergrundunschärfe fest

Beim Erstellen einiger Seiten müssen wir häufig H...

10 Tipps zur Website-Benutzerfreundlichkeit, die jeder kennen sollte

Lassen Sie uns keine weitere Zeit verschwenden un...

Einführung in die Nginx-Protokollverwaltung

Nginx-Protokollbeschreibung Über Zugriffsprotokol...

Zusammenfassung der MySQL InnoDB-Sperren

Inhaltsverzeichnis 1. Gemeinsam genutzte und exkl...

Vue+Vant implementiert die obere Suchleiste

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie MySQL, um die Datengenerierung in Excel abzuschließen

Excel ist das am häufigsten verwendete Tool zur D...

Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen

Inhaltsverzeichnis Vorwort 1. Aktuelle Uhrzeit er...

JavaScript implementiert den Front-End-Countdown-Effekt

In diesem Artikel wird der spezifische JavaScript...

Implementierung der Vue-Paketgrößenoptimierung (von 1,72 M auf 94 K)

1. Hintergrund Ich habe vor Kurzem eine Website n...

Analyse der vernachlässigten DOCTYPE-Beschreibung

Doctype ist einer davon: <!DOCTYPE HTML PUBLIC ...

Verwendung des Linux-Telnet-Befehls

1. Einleitung Der Befehl Telnet dient zur Anmeldu...