uniapp--简单实现红包雨demo
实现 简单 -- Demo uniapp 红包
2023-09-11 14:18:36 时间
<template> <view class="home"> <view class="content"> <view @animationend="runend(index)" @animationstart="runstart(index)" v-for="(item,index) in packStyle" :key="index" class="envelope" :style="item"> </view> </view> </view> </template> <script> export default { data() { return { packStyle: [] }; }, onLoad() { // 随即生成红包 this.createRedPack(); }, mounted() { }, onReady() { }, methods: { runstart(key){ if(key===0){ console.log('监听动画开始'); } }, runend(key){ if(key===this.packStyle.length-1){ console.log('监听动画结束---下一波红包开始'); this.createRedPack() } }, createRedPack(){ // 随机生成30个红包 var initNumber = 0; for (var i = 0; i < 60; i++) { let lefts = (Math.floor(Math.random()*5+5)); // 随机边距 let delay = Math.floor(Math.random()*5+2); // 延迟时间 initNumber+=lefts; // 确保唯一,不让红包出现重叠现象 this.packStyle.push({ 'left': initNumber+'%', 'top': lefts+'px', 'animation-delay': delay/2+'s' }) } } } }; </script> <style> .home { width: 100%; height: 100%; } .content { position: relative; height: 100%; background: #fff; overflow: hidden; } .envelope { position: fixed; opacity: 0; animation: drops 1.2s cubic-bezier(.22,.22,.39,.26) 1; width: 60px; height: 60px; background: url(../../static/hongbaotu.png) no-repeat; /* background-color: #007AFF; */ background-size: 60px 60px; } @keyframes drops { 0% { opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(10px, 100vh, -10px); } } </style>
相关文章
- 国密(国产密码)SM2、SM3、SM4 C#实现 new
- 三行代码实现.NET MVC统计显示页面的执行时间 超简单的实现方法 分析页面执行效率
- python netmiko实现cisco网络设备配置备份
- 如何实现大文件上传----分块
- MVC3学习:利用mvc3+ajax结合MVCPager实现分页
- 基于akka与scala实现一个简单rpc框架【100010261】
- java中关于SSL/TSL的介绍和如何实现SSL Socket双向认证
- (6)STM32使用HAL库实现modbus的简单通讯
- 【手撕代码系列】JS手写实现Promise.race
- Nginx反向代理+负载均衡简单实现(https方式)
- 简单实现Http代理工具--完善支持QQ代理
- 简单实现Http代理工具--端口复用与QQ代理
- Unity 工具 之 实现简单的添加脚本命名空间 Namespace 的小工具(不改动原始脚本模板)
- Three 之 three.js (webgl)物体描边效果(outline)三种实现方式的简单整理(后期渲染/MeshBasicMaterial/法线扩展)
- Arcgis for Javascript实现图
- Html --用简单的<hr>实现多样化分割效果
- java原子操作的实现原理--转载
- JavaScript实现一个简单的进度条(有进度含百分比)
- GenericFactoryMethod泛型工厂模式实现简单IOC功能
- 阿里开源中间件canal实现mysql数据库同步,零侵入不写代码实现,也可以通过整合到项目程序实现更加灵活的控制,简单几步实现高性能准实时多数据库多数据表的数据同步,可在windows和Linux部署
- js 实现弹出层效果
- Vue安装并使用路由和路由器实现页面跳转