Vue.js implements the code of clicking the icon to zoom in and leaving

Vue.js implements the code of clicking the icon to zoom in and leaving

The previous article introduced how Vue can realize cropping pictures and zooming in, out, and rotating them. Today, I will introduce how Vue.js can realize the functions of clicking icons to zoom in and out. The specific code is as follows:

@-webkit-keyframes pulse1 {
 from {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
@keyframes pulse1 {
 from {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
 
.pulse1 {
 -webkit-animation-name: pulse1;
 animation-name: pulse1;
}
 
@-webkit-keyframes pulse {
 from {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 to {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
 
@keyframes pulse {
 from {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 to {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
 
.pulse {
 -webkit-animation-name: pulse;
 animation-name: pulse;
}
 
.animate1 {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

This is the end of this article about vue.js's code for implementing zooming in and out when clicking an icon. For more relevant content about vue's code for implementing zooming in and out when clicking an icon, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Solution to automatically trigger click events when clicking on pop-up window in Vue (simulation scenario)
  • Two ways to close the pop-up window by clicking on the blank area in Vue
  • Vue implements clicking the current row to change color
  • Vue3.0 implements click-to-switch verification code (component) and verification
  • Detailed explanation of the event of triggering child components by clicking buttons in parent components in Vue
  • Vue prevents multiple triggering requests after continuous clicks in a short period of time
  • Vue implements dynamic assignment of id, and click event to obtain the id operation of the currently clicked element
  • Example of Vue realizing click to display the pop-up box
  • Vue uses the table in ant design to trigger the event operation when clicking a row
  • Vue implements click feedback instructions for water ripple effect

<<:  mysql 5.6.23 winx64.zip installation detailed tutorial

>>:  Centos 7 64-bit desktop version installation graphic tutorial

Recommend

React-native sample code to implement the shopping cart sliding deletion effect

Basically all e-commerce projects have the functi...

VUE+Canvas implements the sample code of the desktop pinball brick-breaking game

Everyone has played the pinball and brick-breakin...

Detailed explanation of the process of installing msf on Linux system

Or write down the installation process yourself! ...

Analysis and application of irregular picture waterfall flow principle

The layout problem of irregular picture walls enc...

Nginx merges request connections and speeds up website access examples

Preface As one of the best web servers in the wor...

W3C Tutorial (3): W3C HTML Activities

HTML is a hybrid language used for publishing on ...

Vue uses Canvas to generate random sized and non-overlapping circles

Table of contents Canvas related documents Effect...

MYSQL updatexml() function error injection analysis

First, understand the updatexml() function UPDATE...

Webpack loads css files and its configuration method

webpack loads css files and its configuration Aft...

Detailed explanation of MySQL index selection and optimization

Table of contents Index Model B+Tree Index select...

Linux beginners in virtual machines configure IP and restart the network

For those who are new to virtual machines or have...

Detailed explanation of how to implement secondary cache with MySQL and Redis

Redis Introduction Redis is completely open sourc...

Vue implements graphic verification code

This article example shares the specific code of ...