vue图片淡入淡出

在Vue中实现图片淡入淡出效果，可以使用CSS3的transition和keyframe动画。

首先，我们可以给图片定义一个初始透明度为0的样式，并在图片加载完成后改变它的透明度，以实现淡入效果。

<template>
    <img :src="imgSrc" class="fade-in"/>
  </div>
</template>
<style scoped>
.fade-in {
  opacity: 0;
  transition: opacity 1s linear;
.fade-in.active {
  opacity: 1;
</style>
<script>
export default {
  data() {
    return {
      imgSrc: "your image url"
  mounted() {
    this.$nextTick(() => {
      this.$el.querySelector(".fade-in").classList.add("active");
</script>
其次，我们也可以使用keyframe动画实现图片的淡入淡出效果：
<template>
    <transition name="fade">
      <img v-if="show" :src="imgSrc"/>
    </transition>
  </div>
</template>
<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
    opacity: 1;
@keyframes fadeOut {
  from {
    opacity: 1;
    opacity: 0;
.fade-enter-active, .fade-leave-active {
  animation: fadeIn 1s, fadeOut 1s;
.fade-enter, .fade-leave-to {
  opacity: 0;
</style>
<script>
export default {
  data() {
    return {
      show: true,
      imgSrc: "your image url"
</script>
以上就是在Vue中实现图片淡入淡出效果的方法。