vue 实现上浮气泡效果

news2024/11/14 13:56:36

 一、 效果

二、代码

  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);
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2034920.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java面试题(一)----Java基础

基础 Java中和equals有什么区别&#xff1f; 一个是运算符&#xff0c;一个是方法。 如果比较的对象是基本数据类型&#xff0c;则比较数值是否相等&#xff1b;如果比较的是引用数据类型&#xff0c;则比较的是对象的内存地址是否相等。 因为Java只有值传递&#xff0c;对于…

SQL Zoo 9-.Window functions

以下数据均来自SQL Zoo 1.Show the lastName, party and votes for the constituency S14000024 in 2017.&#xff08;显示2017年选区“S14000024”的姓氏、政党和选票&#xff09; SELECT lastName, party, votesFROM geWHERE constituency S14000024 AND yr 2017 ORDER BY…

开启IDEA打开新项目时窗口提示

1.背景 实际开发中很多时候,我们会同时打开多个项目,或者项目切换, 这时候有2中情况,打开新窗口或者在当前窗口打开(即:关闭当前窗口,打开新窗口) 具体是那种情况,要根据实际场景,因此我们希望可以弹框提示: 是打开新窗口,还是在当前窗口打开 具体设置如下: 2.步骤 3.测试…

中国科技统计年鉴,数据覆盖1991-2022年多年份

基本信息. 数据名称: 中国科技统计年鉴 数据格式: excel 数据时间: 1991-2022年 数据几何类型: xlsx 数据坐标系: WGS84 数据来源&#xff1a;国家统计局 数据预览&#xff1a; 数据可视化.

zabbix“专家坐诊”第251期问答

问题一 Q&#xff1a;zabbix模板自带的监控项很多都不需要&#xff0c;也不用删除&#xff0c;就是怎么让他们都不展示出来 A&#xff1a;禁用掉 Q&#xff1a;还是在的&#xff0c;我想要就看不见&#xff0c;不是不启用&#xff0c;想要效果跟删除一样&#xff0c;看不见&am…

我在高职教STM32——I2C通信之SHT20传感器(1)

大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正是如此,才有了借助CSDN平台寻求认同感和成就感的想法。在这里,我准备陆续把自己花了很多心思设计的教学课件分…

go-zero中基本配置及获取参数

一、使用配置文件启动项目 1、在项目的etc文件夹下分别创建开发环境和测试环境的配置文件,这里简单点使用不同的端口 2、配置Makefile文件启动命令来启动不同配置文件 runDev:go run users.go -f etc/application-dev.yml runProd:go run users.go -f etc/application-prod.ym…

RC电路(三):零点和极点

一、零极点定义 零点和极点是在自动控制原理中用于描述系统特性的概念。‌ 零点&#xff08;Zero&#xff09;&#xff1a;‌在传递函数的分子多项式等于零的解。即当系统的输入信号等于零时&#xff0c;‌输出信号不为零的情况下&#xff0c;‌输入信号与输出信号相等的点。‌…

人工智能系统测试生命周期详解之测试数据准备

前面的文章里我们已经整体介绍过了人工智能测试的生命周期&#xff0c;它需要经历测试需求的分析、测试环境的准备、数据的准备与验证、测试的执行预分析以及上线后的监控这样一个过程。前面的文章已经为大家介绍了人工智能系统测试生命周期的“需求分析”环节和“测试环境准备…

SPSS-主成分分析实践

相信各位小伙伴都知道主成分分析的原理&#xff0c;我们今天用SPSS来实现一下主成分分析 主成分分析步骤 对原来的全部指标进行标准化&#xff0c;以消除变量在水平和量纲的影响根据标准化的数据矩阵求出相关系数矩阵求出协方差矩阵的特征根和特征向量确定主成分&#xff0c;…

DRM(Direct Rendering Manager)直接渲染管理

DRM是Linux 内核的一个子系统&#xff0c;负责与现代显卡的GPU进行交互。DRM 公开了一个API (libdrm)&#xff0c;用户空间程序可以使用该API 向 GPU 发送命令和数据并执行诸如配置显示器模式设置之类的操作。DRM 最初是作为X 服务器直接渲染基础架构的内核空间组件开发的&…

大规模复杂场景三维重建与理解——学习笔记

一、完整的大规模复杂场景三维重建与理解系统 一个完整的大规模复杂场景三维重建与理解系统包含“自主式场景数据获取->高精度联合位姿解算->完整化三维几何重建->细粒度三维语义分割->结构化三维矢量表达->全天候长时定位定姿->高时效地图增量更新”等模块。…

2022年第一至第四批专精特新“小巨人”企业数据,企业名称、经营范围、公示批次等字段可查询

基本信息. 数据名称: 第一至第四批专精特新“小巨人”企业数据 数据格式: Shpxlsx 数据时间: 2022年 数据几何类型: 点 数据坐标系: WGS84坐标系 数据来源&#xff1a;《中国城市统计年鉴》中统计的工业企业数相关数据&#xff0c;对象为地级及以上的城市&#xff0c;统计…

【书生大模型实战营第三期 | 进阶岛第2关-Lagent 自定义你的 Agent 智能体】

学习心得&#xff1a;Lagent 自定义你的 Agent 智能体 摘要 Lagent 是一个为大语言模型设计的轻量级开源智能体框架&#xff0c;它不仅支持多种智能体范式&#xff0c;如 AutoGPT、ReAct&#xff0c;还集成了多种工具&#xff0c;包括但不限于 Arxiv 搜索、Google 搜索等。通…

电子行业数字工厂管理系统解决方案

电子行业数字工厂管理系统解决方案是针对电子企业特定需求而设计的一套综合管理系统&#xff0c;旨在通过数字化手段提升生产效率、优化资源配置、降低运营成本&#xff0c;并确保高品质产品的输出。以下是一个详细的电子行业数字工厂管理系统解决方案的概述&#xff1a; 一、系…

C语言:字符函数,字符串函数

在编程的过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;为了方便操作字符和字符串&#xff0c;C语言标准库中提供了一系列库函数。 一. 字符分类函数 C语言中有一系列的函数是专门做字符分类的&#xff0c;也就是一个字符是属于什么类型的字符的。 这些函数的使用…

你知道AI模型是如何学习的吗?

在人工智能的广阔天地中&#xff0c;AI模型的学习方式不仅决定了其智能行为的深度和广度&#xff0c;更是推动技术进步和应用创新的关键动力。随着AI技术的飞速发展&#xff0c;我们越来越意识到&#xff0c;深入了解AI的学习机制对于把握其潜能至关重要。 我们将从基础概念出…

hive之greatest和least函数

1、greatest函数&#xff1a; greatest(col_a, col_b, ..., col_n)比较n个column的大小&#xff0c;过滤掉null或对null值进行处理&#xff0c;当某个column中是string&#xff0c;而其他是int/double/float等时&#xff0c;返回null&#xff1b; 举例&#xff1a; select g…

Python 中的变量赋值、多重赋值

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在编程中&#xff0c;变量赋值是最基础的操作之一。Python 作为一门动态类型语言&#xff0c;其变量赋值和多重赋值具有独特的灵活性和简洁性。本文将详细介绍 Python 中的变量赋值、多重赋值&#xff0c;并包含…

基于Ascend C的Matmul算子性能优化最佳实践

矩阵乘法是深度学习计算中的基础操作&#xff0c;对于提升模型训练和推理速度至关重要。昇腾AI处理器是一款专门面向AI领域的AI加速器&#xff0c;其AI Core采用达芬奇架构&#xff0c;以高性能Cube计算引擎为基础&#xff0c;针对矩阵运算进行加速&#xff0c;可大幅提高单位面…