How to implement vibration and jitter animation of images in Vue?

How to implement vibration and jitter animation of images in Vue?

In Vue, we can use the animation library or custom styles to achieve the vibration and jitter effects of images. Next, I will introduce two commonly used methods.

1. Use the Animate.css library to realize the vibration and jitter animation of the image

The first method is to use the Animate.css library to realize the vibration and jitter animation of the image. Animate.css is an open source CSS animation library that contains a large number of predefined animation effects, which is very convenient and practical. The following is a sample code:

First, introduce the Animate.css library into the project. It can be installed through npm or introduced directly through CDN.

<!-- 通过CDN引入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<!-- 或者通过npm安装 -->
npm install animate.css --save

Then, use this library in the Vue component to implement vibration and jitter animation effects.

<template>
  <div>
    <img  src="/static/imghw/default1.png"  data-src="your-image.jpg"  class="lazy"  :class="'animated ' + animation" @click="shakeImage" / alt="How to implement vibration and jitter animation of images in Vue?" >
  </div>
</template>

<script>
import 'animate.css';

export default {
  data() {
    return {
      animation: '',
    };
  },
  methods: {
    shakeImage() {
      this.animation = 'shake';
      setTimeout(() => {
        this.animation = ''; // 清空动画类名，恢复原始状态
      }, 1000); // 动画的持续时间
    },
  },
};
</script>

Here we use the @click event to trigger the shakeImage method, which adds the "animated" class and "shake" class name to the image, thereby causing the image to vibrate. Then use the setTimeout method to clear the animation effect after a certain period of time and restore the original state.

2. Use Vue’s animation hook function to realize the vibration and jitter animation of the picture

The second method is to use Vue’s animation hook function to realize the vibration and jitter effect of the picture . Vue provides a series of animation hook functions in which we can define the animation process.

The following is a sample code:

<template>
  <div>
    <img  class="image lazy"  src="/static/imghw/default1.png"  data-src="your-image.jpg"  v-show="showImage" @click="shakeImage" / alt="How to implement vibration and jitter animation of images in Vue?" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: true,
    };
  },
  methods: {
    shakeImage() {
      this.showImage = !this.showImage;
    },
  },
  mounted() {
    const imageElement = document.querySelector('.image');
    
    imageElement.addEventListener('animationend', () => {
      this.showImage = true; // 动画结束后，恢复显示图片
    });
  },
};
</script>

In this example, we achieve the jitter effect of the image by listening to the animationend event. When the picture is clicked, the display state of the image will be switched. When the animation ends, the display state of the image will be switched back to achieve a continuous jittering effect.

Conclusion:

Above, I introduced two methods to implement image vibration and jitter animation in Vue. If you need other more complex animation effects, you can use Vue's transition component or other animation libraries to achieve it. I hope this article is helpful to you, and I wish you a happy development using Vue!

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