vue 实现上浮气泡效果

 一、 效果

二、代码

  1.用 li 来做每个气泡

  <div class="dataSea_middle_bottom">
       <ul>
           <li
             v-for="(item,index) in keyBusiness"
             :key="index"
             class="pops animal"
            >
             <p class="fb">{{ item.name}}</p>
             <p>{{ item.num}}</p>
           </li>
        </ul>
   </div>

2.js部分

getList(){ //获取数据接口
  .....
  this.clearAllTimer();
  http.getList({}).then(res => {
    this.$nextTick(() => {
       this.setAnimation();
    });
  })
  ..... 
}

//设置动画
setAnimation() {
      let lis = document.getElementsByClassName("pops");  //气泡数据的个数
      for (let i = 0; i < lis.length; i++) {
        const el = lis[i];
        // el.style.animationDelay = Math.floor((i + 1) / 6) * 8 + "s";//8s每次放6个
        // 动画延迟时间  每次放多少个 * 大概延迟多少秒
        el.style.animationDelay =
          Math.floor((i + 1) / 1) * 1 + "s"; //每秒放1个
        //TODO left是5-95之间的随机数
        el.style.left = this.getRandomNumber(1, 75) + "%";
        //TODO 动画总时间是5-7之间的随机数
        // el.style.animationDuration = this.getRandomNumber(5, 7) + "s";
        el.style.animationDuration = "5s";
        //以上气泡个数、动画时间、偏移距离根据实际调整

        // 第二种方法
        this.endOrStart(el, lis.length, i);
      }
    },

    // 第二种结束
    endOrStart(el, lengths, index) {
      const style = getComputedStyle(el);
      const animationDuration = parseFloat(style.animationDuration);
      const animationDelay = parseFloat(style.animationDelay);
      const seconds = (animationDuration + animationDelay) * 1000;
      let _this = this;
      let timer = setTimeout(function () {
        el.classList.remove("animal");
        _this.endIndex += 1;
        if (lengths == _this.endIndex) {
          _this.endIndex = 0;
          let keyBusiness = _.cloneDeep(_this.keyBusiness);
          _this.keyBusiness = [];
          setTimeout(() => {
            _this.keyBusiness = keyBusiness;
            _this.$nextTick(() => {
              // console.log('第二轮');
              _this.clearAllTimer();
              _this.setAnimation();
            });
          }, 100);
        }
      }, seconds);
      _this.timers.push(timer);
    },

    // 清除所有定时器
    clearAllTimer() {
      for (let i = 0; i < this.timers.length; i++) {
        clearTimeout(this.timers[i]);
        this.timers[i] = null;
      }
      this.timer = [];
    },
    // 随机数
    getRandomNumber(a, b) {
      return Math.floor(Math.random() * (b - a + 1)) + a;
    },

3.css

.dataSea_middle_bottom {   
    width: 100%;
    height: 90%;
}

@keyframes mymove {
  0% {
    opacity: 1;
    bottom: 0rem;
    transform: scale(0.2);
  }
  100% {
    opacity: 0.9;
    /* bottom: 35rem; */
    /* bottom: 20rem; */
    bottom: 80%;
    transform: scale(1);
  }
}
ul {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 0;
}
  li {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    width: 5rem;
    height: 5rem;

    background-size: cover;
    text-align: center;
    cursor: pointer;
  }
 p {
    width: 5rem;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: .75rem;
 }
  .animal {
    animation: mymove;
  }
  li:nth-child(2n) {
    background-image: url("~@/assets/newDataOcean/bluePop.png");
    color: #0072FF;
  }
  li:nth-child(2n + 1) {
    background-image: url("~@/assets/newDataOcean/greenPop.png");
    color: #00A63C;
  }

  li:nth-child(odd) {
    animation-delay: calc(1s * (1 - 1) / 2);
  }

  li:nth-child(even) {
    animation-delay: calc(1s * (2 - 1) / 2);
  }