vue2如何实现类似拼多多转盘的功能

abc8002117034

已于 2024-04-10 09:44:28 修改

阅读量249

点赞数

文章标签： java 服务器前端

于 2023-09-07 16:29:45 首次发布

本文链接：https://blog.csdn.net/abc8002117034/article/details/132740852

版权

1.首先我们需要制作一个转盘动画，并对浏览器的做兼容

<div class="turntable Rotation" id="myAnimation"></div>

@-webkit-keyframes rotation {

    from {

        -webkit-transform: rotate(0deg);

    }

    to {

        -webkit-transform: rotate(360deg);

    }

}

.Rotation {

    animation: rotation 5s linear infinite;

    animation-play-state: paused;

    /* 对谷歌浏览器支持 */

    -webkit-animation: rotation 5s linear infinite;

    -webkit-animation-play-state: paused;

    /* 对火狐浏览器支持 */

    -moz-animation: rotation 5s linear infinite;

    -moz-animation-play-state: paused;

    /* 对opera浏览器支持 */

    -o-animation: rotation 5s linear infinite;

    -o-animation-play-state: paused;

    /* 对IE浏览器支持 */

    -ms-animation: rotation 5s linear infinite;

    -ms-animation-play-state: paused;

}

2.其次我们可以通过js控制转盘的转动与停止

      // 2秒后开始旋转
      this.runningTimer = setInterval(() => {
        document.getElementById("myAnimation").style.animationPlayState = "running";
      }, 2000)
      // 5秒后停止旋转
      this.pausedTimer = setInterval(() => {
        clearInterval(this.runningTimer)
        document.getElementById("myAnimation").style.animationPlayState = "paused";
      }, 7000)