vue 翻牌抽奖

前段时间公司需要搞个抽奖活动，按照产品要求就写了个翻牌抽奖。最近抽空封装成翻牌抽奖的插件turn-lucky

先看最终效果

方法

closeDialog (关闭弹窗事件)

flipCard （翻牌事件）这里可以根据后端接口返回图片地址

传入参数：

参数	type	example
title	String	福袋(可不传)
imgSrc	String	图片地址
showDialog	Boolean	弹窗是否关闭
luckName	String	中奖名字(可不传)
btnText	String	弹窗按钮文案(可不传)

npm包  npm install turn-lucky

在需要用到的页面中（注意 一个页面目前只能引入一次）

import turnLucky from "turn-lucky";

components: { turnLucky }

开发思路

翻牌css特效

  .front,.back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    top: 0;
    left: 0;
    width: 109px;
    height: 109px;
    background: url("xxx.png") center center;
    background-size: contain;
    border-radius: 12px;
  }
  .back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    position: absolute;
  }
  .flip-container.flipped .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  .flip-container.flipped .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

弹窗打开及关闭css特效

/*1、定义动画*/
@keyframes bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*2、调用动画*/
.rightTopIn {
  transform-origin: center center;
  animation: bounce 1s;
}
.rightTopOut {
  transform-origin: right top;
  animation: bounce 1s reverse;
}

佛光css特效

.Rotation{
    background: url("xxx.png") no-repeat center center;
    background-size: cover;
    animation:turn 8s linear infinite;      
}
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}

红包雨特效

<div class="red_packet" id="red_packet">
   <ul 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">
            <i :style="{ transform: item.transforms, webkitTransform: item.transforms}"></i>
       </li>
    </ul>
</div>

data () {
    return {
        liParams: [],
        rainTimer: 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这个数值保持一样

      this.liParams.push({left: left+'px', cls: 'move_1', transforms: 'rotate('+ rotate +') scale('+ scales +')', durTime: durTime})

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

      this.rainTimer = setTimeout( () => {
          this.startRedPacket()
      },50) 
  },
  /**
   * 回收dom节点
   */
  removeDom (e) {
      let target = e.currentTarget;
      document.querySelector('#red_packet').removeChild(target)
  }
},
destroyed(){
    if(this.rainTimer){
        clearInterval(this.timer)
    }
}