轮播图案列

一、功能截图

二、代码示例

代码如下（示例）：

<template>
  <div style="width: 100%;height: 100%">
    <el-carousel :interval="5000" height="350px"  @change="changeMethod" indicator-position="outside">
      <el-carousel-item v-for="(item,index) in images" :key="index">
        <el-image :class="className" style="width:100%; height:100%" :src="item.idView" fit="fit"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
          
   
  name: "Index",
  data() {
          
   
    return {
          
   
      images: [
        {
          
   id: 0, idView: require(../res/img.png)},
        {
          
   id: 1, idView: require(../res/img_1.png)},
        {
          
   id: 2, idView: require(../res/img_2.png)},
        {
          
   id: 3, idView: require(../res/img_3.png)},
      ],
      className: "",
    }
  },
  mounted() {
          
   
    this.className = "old-carousel";
    setTimeout(() => {
          
   
      this.className = "new-carousel";
    }, 300);
  },
  methods: {
          
   
    changeMethod: function (e) {
          
   
      this.className = "old-carousel";
      setTimeout(() => {
          
   
        this.className = "new-carousel";
      }, 300);
    }
  }
}
</script>
<style scoped>
.new-carousel {
          
   
  transition: all 2s;
  transform: scale(1.5);
}

.old-carousel {
          
   
  transform: scale(1);
}

.el-carousel__item.is-animating {
          
   
  transition: transform 1s ease-in-out;
}
</style>

总结

思维逻辑比较清晰简单