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:

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