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

Detaillierte Erläuterung der JavaScript-Programmschleifenstruktur

Inhaltsverzeichnis Struktur auswählen Schleifenst...

Methoden und Probleme zum Festlegen des HTML-Zeilenabstands

Um den Zeilenabstand von <p></p> festz...

Containerisierungstransformation für Docker-Großprojekte

Virtualisierung und Containerisierung sind zwei u...

Beispiel für die Implementierung eines Skeleton-Bildschirms mit Vue

Inhaltsverzeichnis Verwendung des Skelettbildschi...

Diagramm des Tomcat CentOS-Installationsprozesses

Tomcat CentOS-Installation Dieses Installationstu...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24

In diesem Artikel finden Sie das Installations- u...

Oberflächliches Webdesign

<br />Ich war schon immer der Meinung, dass ...

Eine kurze Diskussion über den Spaß von :focus-within in CSS

Ich glaube, einige Leute haben dieses Bild gesehe...

Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Mehrere Konzepte Zeilenbox: Eine Box, die eine In...

MySQL-Join-Abfragesyntax und Beispiele

Verbindungsabfrage: Es ist das Ergebnis der paarw...

Kennen Sie die seltsamen Dinge in Javascript?

Unsere erfahrenen Vorgänger haben zahllose Codes ...

HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation

HTML imitiert die Dropdown-Menüfunktion der Baidu...

Kreatives „Über uns“-Webseitendesign

Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...