vue移動(dòng)端實(shí)現(xiàn)紅包雨效果
更新時(shí)間:2020年06月23日 16:30:28 作者:徹夜不歸
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)紅包雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)紅包雨效果的具體代碼,供大家參考,具體內(nèi)容如下
下面是代碼:
<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 // 定義時(shí)間 } }, mounted () { this.startRedPacket() }, methods: { /** * 開(kāi)啟動(dòng)畫(huà) */ 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"; // 旋轉(zhuǎn)角度 let scales = (Math.random() * (12 - 8 + 1) + 8) * 0.1; // 圖片尺寸 let durTime = (Math.random() * (2.5 - 1.2 + 1) + 1.2) + 's'; // 時(shí)間 1.2和1.2這個(gè)數(shù)值保持一樣 console.log(durTime) this.liParams.push({left: left+'px', cls: 'move_1', transforms: 'rotate('+ rotate +') scale('+ scales +')', durTime: durTime}) setTimeout( () => { // 多少時(shí)間結(jié)束 clearTimeout(this.timer) return; }, this.duration) this.timer = setTimeout( () => { this.startRedPacket() },100) }, /** * 回收dom節(jié)點(diǎn) */ 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>
效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11解決v-for中使用v-if或者v-bind:class失效的問(wèn)題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3處理錯(cuò)誤邊界(error boundaries)的示例代碼
在開(kāi)發(fā) Vue 3 應(yīng)用時(shí),處理錯(cuò)誤邊界(Error Boundaries)是一個(gè)重要的考量,在 Vue 3 中實(shí)現(xiàn)錯(cuò)誤邊界的方式與 React 等其他框架有所不同,下面,我們將深入探討 Vue 3 中如何實(shí)現(xiàn)錯(cuò)誤邊界,并提供一些示例代碼幫助理解什么是錯(cuò)誤邊界,需要的朋友可以參考下2024-10-10vue文本識(shí)別"\n"換行問(wèn)題的解決方式
在頁(yè)面中經(jīng)常會(huì)遇到自定義文本,如果文本過(guò)長(zhǎng)就需要換行,在HTML中可以通過(guò)標(biāo)簽換行,也可以通過(guò)\n轉(zhuǎn)椅字符換行,下面這篇文章主要給大家介紹了關(guān)于vue文本識(shí)別“\n”換行問(wèn)題的解決方式,需要的朋友可以參考下2022-11-11