前端实现:点击硬币实现硬币翻转动画，且动画停止时正反面随机

最新推荐文章于 2023-09-22 13:36:47 发布

天马行空zqzq

最新推荐文章于 2023-09-22 13:36:47 发布

阅读量846

点赞数

文章标签：前端 vue.js css 动画

本文链接：https://blog.csdn.net/qq_42039912/article/details/131788997

版权

html:

      <div class="pic-box" ref="animationBox">
            <div class="boxes" @click="handleTransform">
                <div class="box">
                    // 硬币正面图片
                    <img :class="coin1 ? 'img-pic' : 'img-text'" :src="coinPic" alt="">
                    // 硬币反面图片
                    <img :class="coin1 ? 'img-text' : 'img-pic'" :src="coinText" alt="">
                </div>
            </div>
            <div class="boxes" @click="handleTransform">
                <div class="box">
                    <img :class="coin2 ? 'img-pic' : 'img-text'" :src="coinPic" alt="">
                    <img :class="coin2 ? 'img-text' : 'img-pic'" :src="coinText" alt="">
                </div>
            </div>
            <div class="boxes" @click="handleTransform">
                <div class="box">
                    <img :class="coin3 ? 'img-pic' : 'img-text'" :src="coinPic" alt="">
                    <img :class="coin3 ? 'img-text' : 'img-pic'" :src="coinText" alt="">
                </div>
            </div>
        </div>

样式定义：

.pic-box {
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    .boxes {
      width: 190px;
      height: 190px;
      background-image: url('@/assets/image/hexagram/home/coin-bg.png');
      background-size: cover;
      background-repeat: no-repeat;
    }

    .box
    {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      .img-pic {
        width: 156px;
        height: 156px;
        position: absolute;
        top: 17px;
        left: 17px;
        z-index: 1;
      }

      .img-text {
        width: 156px;
        height: 156px;
        position: absolute;
        top: 17px;
        left: 17px;
        z-index: 0;
      }
    }
  }
  .pic-box-animation {
    .box {
      animation: box-animation .5s linear 0s infinite;
      .img-pic {
        animation: img-pic-animation .5s linear 0s infinite;
      }
      .img-text {
        animation: img-text-animation .5s linear 0s infinite;
      }
    }


    @keyframes box-animation {
      0% {
        transform: rotateY(0deg)
      }
      50% {
        transform: rotateY(180deg)
      }
      100% {
        transform: rotateY(360deg)
      }
    }

    @keyframes img-pic-animation {
      0% {
        z-index: 1;
      }
      50% {
        z-index: 0;
      }
      100% {
        z-index: 1;
      }
    }

    @keyframes img-text-animation {
      0% {
        z-index: 0;
      }
      50% {
        z-index: 1;
      }
      100% {
        z-index: 0;
      }
    }
  }

变量定义：

<script setup>
import {ref} from 'vue'

// 硬币的正反  0为字面，1为图面
const coin1 = ref(0)
const coin2 = ref(0)
const coin3 = ref(0)

</script>

事件定义：

const timer = null
const animationBox = ref(null)
const handleTransform = () => {
     // 防止1.5秒内重复点击
    if (timer) return
    animationBox._rawValue.classList.add('pic-box-animation')
    timer = setTimeout(() => {
        animationBox._rawValue.classList.remove('pic-box-animation')
        timer = null
        // 设置三个硬币的正反面
        coin1.value = Math.round(Math.random())
        coin2.value = Math.round(Math.random())
        coin3.value = Math.round(Math.random())

    }, 1500)

}

效果：