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 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue实现底部菜单功能
Jul 24 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
一张图带我们入门Python基础教程
2017/02/05 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
美国时尚在线:Showpo
2017/09/08 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
国际会议邀请函范文
2014/01/16 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
2014年计生工作总结
2014/11/21 职场文书
水电施工员岗位职责
2015/04/11 职场文书
同学会演讲稿
2019/04/02 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
关于 Python json中load和loads区别
2021/11/07 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
Elasticsearch 配置详解
2022/04/19 Java/Android