vue.js实现红包雨

vue.js实现红包雨

看了好多实现红包雨的案例，但好像还没有vue实现红包雨的，所以我来实现下，测试过了，兼容性很好，接下来直接po代码啦
index.vue

<template>
    <div class="">
       <div id="redzone">
       </div>
    </div>
</template>

js

<script>
import jQuery from 'jquery'
export default {
    name:'hongbao',
    data () {
        return {
          
        }
    },
    computed:{
  
    },
methods:{
      addBao:function(left, height, src) {
        var div = document.createElement("div");
        var img = document.createElement("img");
        div.appendChild(img);
        img.className = "roll";
        img.src = src;
        div.style.left = left + "px";
        div.style.height = height + "px";
        div.className = "redBox";
        document.getElementById("redzone").appendChild(div);
        setTimeout(function() {
            document.getElementById("redzone").removeChild(div);
            // console.log(window.innerHeight); 
        }, 3000);
        
    },
   
   
},
mounted(){
            let vueObject = this;
            setInterval(function(){
                var left = Math.random() * document.body.scrollWidth;;
                var height = Math.random() * document.body.scrollHeight;
                var src = "./static/images/pocket.png"; 
                vueObject.addBao(left, height, src);
            }, 500);
}
}
</script>

css

 @keyframes redImg {
    0% {
        top:0;
    }
    100% {
        top: 100%;
    }
}
.redBox {
    position: absolute;
   /* opacity: 0;*/
   z-index: 10000;
    animation: redImg 3s infinite linear;
    -webkit-animation: redImg 3s infinite linear;
    -moz-animation: redImg 3s infinite linear;
    -ms-animation: redImg 3s infinite linear;
    -o-animation: redImg 3s infinite linear;
}

.redBox {
    position: fixed;
    img{
      display: block;width: 1rem;height: 1.3rem;
    }
}

ps：实现原理其实很简单，css3向下飘落动画