How to implement image flashing and rotation animation in Vue?

How to implement image flashing and rotation animation in Vue

Vue.js is one of the most popular front-end frameworks at present. It provides powerful tools to manage and Display the data on the page. In Vue, we can create various effects on elements by adding CSS styles and animations. This article will introduce how to use Vue and CSS to achieve flashing and rotating animations of images.

First, we need to prepare a picture, which can be a local picture file or a picture address on the network. We will use the <img class="animate-image lazy" src="/static/imghw/default1.png" data-src="imageSrc" alt="How to implement image flashing and rotation animation in Vue?" > tag to display the image, and bind the src attribute of the image in the Vue template.

<template>
  <div>
    <img class="animate-image lazy" src="/static/imghw/default1.png" data-src="imageSrc" : alt="图片">
  </div>
</template>

Next, we need to add some styles to define the initial state and animation effects of the image. We can add the following style to the CSS file:

.animate-image {
  /* 设置图片的初始状态 */
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 1s, transform 1s;
}

.animate-image.shake {
  /* 添加图片闪烁的动画效果 */
  animation: shake 1s infinite;
}

@keyframes shake {
  0% {
    /* 初始状态 */
    transform: rotate(0deg);
  }
  50% {
    /* 图片旋转 45 度 */
    transform: rotate(45deg);
    opacity: 0.5;
  }
  100% {
    /* 回到初始状态 */
    transform: rotate(0deg);
    opacity: 1;
  }
}

.animate-image.rotate {
  /* 添加图片旋转的动画效果 */
  animation: rotate 3s infinite linear;
}

@keyframes rotate {
  from {
    /* 初始状态 */
    transform: rotate(0deg);
  }
  to {
    /* 图片顺时针旋转360度 */
    transform: rotate(360deg);
  }
}

In the above code, we use the animation property to specify the name, duration and number of loops of the animation. The animation attribute can receive multiple parameters. We set the shake of the image flickering animation and the rotate of the image rotation animation.

Next, we need to add relevant logic to the JavaScript part of the Vue component to trigger the playback of the animation. We can use Vue's data attribute to define a variable, and then use this variable in the template to control the style class of the image.

export default {
  data() {
    return {
      startAnimation: false  // 控制动画播放的变量
    };
  },
  computed: {
    imageSrc() {
      return this.startAnimation ? '图片路径' : '';
    }
  }
}

In the above code, we use Vue’s computed computed property to return the path of the image. When startAnimation is true, the image path is the real image address, otherwise it is an empty string. Control the animation playback by modifying the value of startAnimation.

Finally, we need to add a button to the template of the Vue component, trigger the function through the @click event, and modify the value of startAnimation to start the animation.

<template>
  <div>
    <img class="animate-image lazy"  src="/static/imghw/default1.png"  data-src="imageSrc"  : alt="图片" />
    <button @click="startAnimation = !startAnimation">播放动画</button>
  </div>
</template>

So far, we have completed the implementation of image flashing and rotation animation. When the button is clicked, the animation will start playing.

Through Vue and CSS, we can easily achieve various animation effects. I hope this article will help you understand how to implement flashing and rotating animations of images in Vue.

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