How to implement image rotation and scaling animation in Vue?-Vue.js-php.cn

How to implement image rotation and scaling animation in Vue?

PHPz

Release： 2023-08-25 21:24:34

Original

2028 people have browsed it

How to implement image rotation and scaling animation in Vue?

With the continuous development of Web technology, animation effects have become an important part of web design. In Vue, by using CSS animation and Vue's transition effects, we can easily implement image rotation and scaling animations. This article describes a simple way to achieve these effects and provides corresponding code examples.

First, we need to introduce Vue and the corresponding CSS files. In the HTML file, use the <script> tag to introduce Vue, and introduce the following CSS file in the <head> tag: </script>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

Copy after login

Next, we need to create a Vue instance and define it in the data attribute variables we need. In this example, we define the angle variable to control the rotation angle of the image, and the scale variable to control the zoom size of the image.

<body>
  <div id="app">
    <img :  style="max-width:90%"rotate(' + angle + 'deg) scale(' + scale + ')' }" src="path_to_image" alt="image" />
    <button @click="rotate">Rotate</button>
    <button @click="scaleImage">Scale</button>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      angle: 0,
      scale: 1
    },
    methods: {
      rotate() {
        this.angle += 90;
      },
      scaleImage() {
        this.scale += 0.1;
      }
    }
  });
</script>

Copy after login

In the above code, we use Vue's two-way data binding to associate angle and scale with the style of the image. When the "Rotate" button is clicked, the rotate method is called to change the value of angle, thereby realizing the rotation animation of the picture. When the "Scale" button is clicked, the scaleImage method is called to change the scale value to achieve the scaling animation of the image.

In addition, we also need to use the animation library to achieve transition effects. In this example, we used animation effects from the Animate.css library. We add a transition effect class name to the img element and bind the class name to the data through dynamic binding:

<img :  style="max-width:90%"rotate(' + angle + 'deg) scale(' + scale + ')' }" :class="{ 'animated': angle !== 0 || scale !== 1 }" src="path_to_image" alt="image" />

Copy after login

With this setting, when the value of angle or scale changes, the image Animation effects will be applied.

Through the above code, we successfully realized the rotation and scaling animation effects of the picture. By changing the values of angle and scale, we can control the rotation angle and zoom size of the image, and achieve transition effects through the CSS animation library.

Summary:
It is relatively simple to implement image rotation and scaling animation in Vue. By using Vue's two-way data binding and animation library, we can easily control the style of pictures and achieve various cool animation effects. Using the code examples provided above as a starting point, you can further extend and optimize the animation effects to achieve more personalized image animation effects.

The above is the detailed content of How to implement image rotation and scaling animation in Vue?. For more information, please follow other related articles on the PHP Chinese website!