vue实现呼吸轮播图淡入淡出效果

不多说，直接上代码

<template>
  <div class="hj-carousel" @mouseenter="stop" @mouseleave="go">
    <transition-group name="list" tag="ul" ref="container">
      <li v-for="(item, index) in carouselInfo" :key="index" class="list-item"
          v-show="index === currentIndex"
          @webkitTransitionend="carouseTransition"
          :style="{backgroundImage: `url(${item.img})`}"
      >
        <!-- 轮播图文本介绍 -->
        <div class="wrapper intro-box">
          <div class="service-intro">
            <h2>{{item.title}}</h2>
            <p>{{item.intro_one}}</p>
            <p>{{item.intro_two}}</p>
            <router-link class="intro-btn" :to="item.target_url">查看</router-link>
          </div>
        </div>
      </li>
    </transition-group>
    <!-- 小圆点 -->
    <ol class="circles-items">
      <li v-for="(item,index) in carouselInfo.length" :class="{'active':index===currentIndex}"
          @click="change(index)"></li>
    </ol>
  </div>
</template>

<style scoped lang="less">
  .hj-carousel {
    position: relative;
    width: 100%;
    height: 520px;
    .list-item {
      position: absolute;
      width: 1920px;
      height: 520px;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background-position: center center;
      background-size: cover;
      .intro-box {
        position: relative;
        height: 100%;
        .service-intro {
          width:418px;
          position: absolute;
          top: 152px;
          left: 58px;
          color: #FFF;
          h2 {
            height:53px;
            line-height:53px;
            font-size:38px;
            font-weight:500;
          }
          p {
            height: 34px;
            line-height: 34px;
            font-size:18px;
          }
          .intro-btn {
            display: block;
            margin-top: 33px;
            width:123px;
            height:40px;
            line-height: 40px;
            text-align: center;
            background:linear-gradient(360deg,rgba(228,39,53,1) 0%,rgba(235,121,101,1) 100%);
            box-shadow:0 5px 20px 0 rgba(230,2,19,0.5);
            border-radius:5px;
            color: #FFF;
            text-decoration: none;
          }
        }
      }
    }
    .circles-items {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 16px;
      z-index: 10;
      margin: 0 auto;
      text-align: center;
      font-size: 0;
      overflow: hidden;
      li {
        width: 10px;
        height: 10px;
        float: left;
        margin-right: 30px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        &.active {
          background-color: rgba(230, 2, 19, 1);
        }
      }
    }
  }

  .list-enter,
  .list-leave-to {
    width: 0;
    height: 0;
    opacity: 0;
  }

  .list-leave-active,
  .list-enter-active {
    transition: all 1s linear;
  }


</style>

<script>
  export default {
    data() {
      return {
        carouselInfo: [
          {
            img: '/static/images/banner/banner_01.jpg',
            title: '新一代信息服务平台上线',
            intro_one: '助理合作伙伴 共创辉煌',
            intro_two: 'LOGO个性化定制、界面清晰、操作简单',
            target_url: '/1'
          },
          {
            img: '/static/images/banner/banner_02.jpg',
            title: '新二代信息服务平台上线',
            intro_one: '助理合作伙伴 共创辉煌',
            intro_two: 'LOGO个性化定制、界面清晰、操作简单',
            target_url: '/2'
          },
          {
            img: '/static/images/banner/banner_03.jpg',
            title: '新三代信息服务平台上线',
            intro_one: '助理合作伙伴 共创辉煌',
            intro_two: 'LOGO个性化定制、界面清晰、操作简单',
            target_url: '/3'
          },
          {
            img: '/static/images/banner/banner_04.jpg',
            title: '新四代信息服务平台上线',
            intro_one: '助理合作伙伴 共创辉煌',
            intro_two: 'LOGO个性化定制、界面清晰、操作简单',
            target_url: '/4'
          }
        ],
        // 当前索引
        currentIndex: 0,
        // 定时器
        timer: '',
        // 小圆点开关
        begin: '',
      }
    },
    methods: {
      go() {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, 3000)
      },
      stop() {
        clearInterval(this.timer);
        this.timer = null
      },
      change(index) {
        this.currentIndex = index
      },
      autoPlay() {
        this.currentIndex++;
        if (this.currentIndex > this.carouselInfo.length - 1) {
          this.currentIndex = 0
        }
      },
      carouseTransition() {
        this.begin = false;
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        if (this.begin) {
          return;
        }
        this.begin = true;
        this.timer = setInterval(() => {
          this.autoPlay()
        }, 3000)
      });
    },
  }


</script>