使用vue2、animate实现背景图片的渐入、渐出且轮换的效果

话不多说，代码如下

<template>
  <div>
    <!-- 使用animate插件实现图片的动态切换 -->
    <transition
      appear
      name="animate__animated animate__bounce animate__slower	"
      enter-active-class="animate__fadeIn"
      leave-active-class="animate__fadeOut"
      v-for="index in classObj.length"
      :key="index"
    >
      <!-- 背景图片轮换 -->
      <div class="mainSize" :class="classObj[index-1]" v-show="isShow===index-1"></div>
    </transition>

    <div class="bodySize">
      <NavMenu></NavMenu>
    </div>
  </div>
</template>

<script>
import "animate.css";
import NavMenu from "./pages/NavMenu.vue";
export default {
  name: "App",
  components: { NavMenu },
  data() {
    return {
      classObj: [
        "background1",
        "background2",
        "background3",
        "background4",
        "background5",
        "background6",
        "background7",
        "background8",
        "background9",
        "background10",
      ],
      isShow: Math.floor(Math.random() * 10) /* 使初始图片随机 */,
    };
  },
  mounted() {
    let i = this.isShow + 1;
    setInterval(() => {
      /* 定时器，每过5s切换图片 */
      if (i > this.classObj.length - 1) i = 0;
      this.isShow = i;
      i++;
    }, 5000);
  },
};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

/* body绑定overflow是为了让图片变大不出现滚动条
   bodySize绑定overflow是为了让具体内容超出浏览器时出现滚动条
 */

.bodySize {
  overflow: auto;
  height: 100%;
  width: 100%;
  position: absolute;
}

.mainSize {
  height: 100%;
  width: 100%;
  background-position: center; /* 图片居中 */
  background-attachment: fixed; /* 背景图片不会随着页面的滚动而滚动 */
  background-size: cover; /* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 */
  position: absolute; /* 使用绝对定位，保证图片不会破坏原有布局 */
}

/* 图片集 */
.background1 {
  background-image: url("./assets/img/background/1.jpg");
}
.background2 {
  background-image: url("./assets/img/background/2.jpg");
}
.background3 {
  background-image: url("./assets/img/background/3.jpg");
}
.background4 {
  background-image: url("./assets/img/background/4.jpg");
}
.background5 {
  background-image: url("./assets/img/background/5.jpg");
}
.background6 {
  background-image: url("./assets/img/background/6.jpg");
}
.background7 {
  background-image: url("./assets/img/background/7.jpg");
}
.background8 {
  background-image: url("./assets/img/background/8.jpg");
}
.background9 {
  background-image: url("./assets/img/background/9.jpg");
}
.background10 {
  background-image: url("./assets/img/background/10.jpg");
}
</style>