vue移动端实现红包雨效果


Posted in Javascript onJune 23, 2020

本文实例为大家分享了vue实现红包雨效果的具体代码,供大家参考,具体内容如下

vue移动端实现红包雨效果

下面是代码:

<template>
 <div class="ser_home">
 <ul class="red_packet" id="red_packet">
  <template v-for="(item, index) in liParams">
  <li :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}" 
 :class="item.cls" :data-index="index" @webkitAnimationEnd="removeDom">
   <a href='javascript:;'>
   <i :style="{ transform: item.transforms, webkitTransform: item.transforms}"></i>
   </a>
  </li>
  </template>
 </ul>
 </div>
</template>


<script>
export default {
 data () {
 return {
  liParams: [],
  timer: null,
  duration: 10000 // 定义时间
 }
 },
 mounted () {
 this.startRedPacket()
 },
 methods: {
 /**
  * 开启动画
  */
 startRedPacket() {
  let win = document.documentElement.clientWidth || document.body.clientWidth
  let left = parseInt(Math.random() * (win - 50) + 0);
  
  let rotate = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg"; // 旋转角度
  let scales = (Math.random() * (12 - 8 + 1) + 8) * 0.1; // 图片尺寸
  let durTime = (Math.random() * (2.5 - 1.2 + 1) + 1.2) + 's'; // 时间 1.2和1.2这个数值保持一样
  console.log(durTime)
  this.liParams.push({left: left+'px', cls: 'move_1', transforms: 'rotate('+ rotate +') scale('+ scales +')', durTime: durTime})


  setTimeout( () => { // 多少时间结束
  clearTimeout(this.timer)
  return;
  }, this.duration)


  this.timer = setTimeout( () => {
  this.startRedPacket()
  },100) 
 },
 /**
  * 回收dom节点
  */
 removeDom (e) {
  let target = e.currentTarget;
  document.querySelector('#red_packet').removeChild(target)
 }
 }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.ser_home {
 width: 100%;
 height: 100%;
}
.red_packet {
 display: block;
 position: relative;
 overflow: hidden;
 width: 100%;
 height: 100%;
 i {
 width: 48px;
 height: 69px;
 display: block;
 background: url('/hongbao.png') no-repeat;
 }
 li {
 position: absolute;
 animation: all 3s linear;
 top:-100px;
 z-index: 10;
 &.move_1 {
  -webkit-animation: aim_move 5s linear 1 forwards;
  animation: aim_move 5s linear 1 forwards;
 }
 }
 a {
 display: block;
 }
}


@keyframes aim_move {
 0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
 100% {
 -webkit-transform: translateY(120vh);
 transform: translateY(120vh);
 }
 }

</style>

效果图:

vue移动端实现红包雨效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
php基于redis处理session的方法
Mar 14 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
vue.js实现简单购物车功能
May 30 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 #Javascript
微信小程序实现红包雨功能
Jul 11 #Javascript
小程序ios音频播放没声音问题的解决
Jul 11 #Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 #Javascript
微信小程序实现发红包功能
Jul 11 #Javascript
vue框架搭建之axios使用教程
Jul 11 #Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 #Javascript
You might like
解析argc argv在php中的应用
2013/06/24 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JS随机调用指定函数的方法
2015/07/01 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
最小二乘法及其python实现详解
2020/02/24 Python
Python函数参数分类原理详解
2020/05/28 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
应届毕业生自荐书
2014/06/18 职场文书
新店开张活动方案
2014/08/24 职场文书
投资入股协议书
2016/03/22 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL