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

So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu

Wie wir alle wissen, gibt es in Computern zwei Art...

Der Unterschied zwischen HTML-Block-Level-Tags und Inline-Tags

1. Blockebenenelement: bezieht sich auf die Fähigk...

MySQL-Fehlernummer 1129 – Lösung

SQLyog stellt eine Verbindung zu MySQL her, Fehle...

So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit

Front-End-Projektpaketierung Suchen Sie .env.prod...

So sammeln Sie Nginx-Protokolle mit Filebeat

Mithilfe von Nginx-Protokollen lassen sich Benutz...

JS Leicht verständliche Funktion und Konstruktor

Inhaltsverzeichnis 1. Übersicht 1.1 Erstellen ein...

js realisiert die Lupenfunktion der Shopping-Website

In diesem Artikel wird der spezifische Code von j...

Implementierung interaktiver Daten zwischen QT und Javascript

1. Daten fließen von QT zu JS 1. QT ruft die JS-F...

Wissen Sie, wie viele Verbindungen ein Linux-Server verarbeiten kann?

Vorwort Sehen wir uns zunächst an, wie eine TCP-V...

So beheben Sie den abnormalen Start von mysql5.7.21

Ein Kollege meldete, dass eine MySQL-Instanz aufg...

Schritte zur vollständigen Deinstallation des Docker-Images

1. docker ps -a zeigt den laufenden Image-Prozess...