Vue flip draw

Some time ago, the company needed to engage in a lottery activity, according to the product requirements to write a card lottery. The plug-in turn-Lucky was recently wrap-around as a flip raffle

Let’s look at the end result

methods

CloseDialog (close popover event)

So flipCard, you can return the image address based on the backend interface

Passing in parameters:

parameter	type	example
title	String	Lucky bag (not passed)
imgSrc	String	Picture address
showDialog	Boolean	Whether the popover is closed
luckName	String	Winning Name (not to be passed on)
btnText	String	Popover button text (no transmission)

NPM install turn-lucky

In the pages that need to be used (note that a page can currently only be imported once)

import turnLucky from “turn-lucky”;

components: { turnLucky }

The development train of thought

Flip CSS effects

  .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);
  }
Copy the code

Pop-ups turn on and off CSS effects

/* define animation */
@keyframes bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1; }}/*2, call animation */
.rightTopIn {
  transform-origin: center center;
  animation: bounce 1s;
}
.rightTopOut {
  transform-origin: right top;
  animation: bounce 1s reverse;
}
Copy the code

Buddha light CSS special effects

.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);}
}
Copy the code

Red Envelope Rain Special effects

<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.// Define the time
    }  
}
mounted () {
  this.startRedPacket()
},
methods: {
  /** * Start animation */
  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"; // Rotate the Angle
      let scales = (Math.random() * (12 - 8 + 1) + 8) * 0.1; // Image size
      let durTime = (Math.random() * (2.5 - 1.2 + 1) + 1.2) + 's'; // Time 1.2 remains the same as time 1.2

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

      setTimeout( () = > { // How much time to finish
          clearTimeout(this.rainTimer)
          return;
      }, this.duration)

      this.rainTimer = setTimeout( () = > {
          this.startRedPacket()
      },50)},/** * reclaim the DOM node */
  removeDom (e) {
      let target = e.currentTarget;
      document.querySelector('#red_packet').removeChild(target)
  }
},
destroyed(){
    if(this.rainTimer){
        clearInterval(this.timer)
    }
}
Copy the code