How to achieve the fade-in and fade-out effects of images in Vue?

How to achieve the fade-in and fade-out effects of images in Vue?

In Vue projects, animation effects are often needed to make the page more vivid and interesting. Among them, the fade-in and fade-out effects of pictures are one of the common requirements. This article will introduce how to use Vue to achieve these effects.

First of all, using animation effects in Vue projects requires the use of Vue's transition system. Vue's transition system provides some built-in class names and hook functions to facilitate us to add corresponding animation effects when components transition.

The gradual display effect of the picture can be achieved through the class name of the transition system. In Vue's transition system, when the display and hiding of images are dynamically controlled through the v-if or v-show instructions, the animation effect can be achieved by adding a class name. In this example, we use the "fade" class name to achieve the fade effect of the image.

The following is a code example:

<template>
  <div>
    <transition name="fade">
      <img v-if="show" :src="imageUrl" alt="图片">
    </transition>
    <button @click="toggleImage">{{ show ? '隐藏图片' : '显示图片' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    toggleImage() {
      this.show = !this.show;
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

In the above code, we use Vue's <transition></transition> component to wrap the picture element. The name attribute is used to specify the name of the transition effect. Here we use "fade" as the name.

In the

Through the above code, we can achieve the fade-in and fade-out effect of the image when the button is clicked.

The above is how to achieve the fade-in and fade-out effects of images in Vue. By rationally using Vue's transition system, we can easily achieve various animation effects to make the page more vivid and interesting. Hope this article helps you!

The above is the detailed content of How to achieve the fade-in and fade-out effects of images in Vue?. For more information, please follow other related articles on the PHP Chinese website!