当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue移动端实现红包雨效果

vue移动端实现红包雨效果

2018年08月08日  | 移动技术网IT编程  | 我要评论

称重传感器生产厂家,深圳pm2.5实时查询,武汉seo培训

本文实例为大家分享了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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网