气泡弹出效果自定义点击一个一个弹出特效(右往左)

• menuControl是一个布尔值，用于控制菜单组的显示
• items是一个数组，每个元素都是一个对象，包含activeSrc和src两个属性，分别代表活动图像和默认图像的URL
• currentIndex是当前活动的项目的索引
• toggleItem(index)是一个方法，当点击项目时会被调用，参数index是被点击的项目的索引

css可自定义设置调试

//html
<div class="recognition-container">
  <div class="menu" :class="{ &#x27;menuShow&#x27;: menuControl }" @click="showMenu">
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c984798b2c0645ad8174e6d105479f0f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=178&#x26;h=178&#x26;s=11512&#x26;e=png&#x26;a=1&#x26;b=7fcef6" alt="">
  </div></div>

  <div class="menu-group" v-if="menuControl">
    <div class="item" v-for="(item, index) in items" :key="index" :class="{ 'itemShow': menuControl && activeIndex >= index }">
      <img :src="currentIndex == index ? item.activeSrc : item.src " alt="" @click="toggleItem(index)">
    </div>
  </div>
</div>

//js
menuControl: false,
currentIndex: -1,
activeIndex: -1,
items:[//图片自己替换即可使用
        { src: 'https://xxx/imgs/ar/i-1.png', activeSrc: '/img/n1.png' },
        { src: 'https://xxx/imgs/ar/i-2.png', activeSrc: '/img/n2.png' },
        { src: 'https://xxx/imgs/ar/i-3.png', activeSrc: '/img/n3.png' }
      ]
      
showMenu(){
  this.menuControl = !this.menuControl
  if (this.menuControl) {
    this.activeIndex = -1;
    this.showNextItem();
  }
},
 toggleItem(index) {
  this.currentIndex = this.currentIndex === index ? -1 : index;
},

//css
.recognition-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.recognition-container .menu {
  height: 178px;
  width: 178px;
  text-align: center;
  position: absolute;
  right: 32px;
  bottom: 100px;
  z-index: 2;
  border-radius: 50%;
  -webkit-transition: all .2s;
  transition: all .2s
}

.recognition-container .menu img {
  height: 178px;
  width: 178px
}

.recognition-container .menu-group {
  height: 98px;
  position: absolute;
  right: 162px;
  bottom: 100px
}

.recognition-container .menu-group .item {
  height: 98px;
  width: 98px;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-radius: 50%;
  -webkit-transition: all .4s;
  transition: all .4s;
  opacity: 0;
  margin-right: 10px
}

.recognition-container .menu-group .item img {
  height: 98px;
  width: 98px
}

.recognition-container .menu-group .item:nth-child(1) {
  right: -140px;
  top: -150px
}

.recognition-container .menu-group .item:nth-child(2) {
  right: -26px;
  top: -128px;
}

.recognition-container .menu-group .itemShow {
  opacity: 1
}

.recognition-container .menu-group .itemShow:nth-child(1) {
  right: -140px;
  top: -150px;
}

.recognition-container .menu-group .itemShow:nth-child(2) {
  right: -26px;
  top: -128px;
}