vue控制图片旋转demo

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, init

开心猫猫虫

3136人浏览 · 2021-10-11 21:15:21

开心猫猫虫 · 2021-10-11 21:15:21 发布

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <img :src="imgSrc" class="image" :style=" animationState"/>
    <br>
    <div class="btnContainer">
        <button @click="handlePlay">旋转</button>
        <button @click="handlePause">暂停</button>
    </div>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      imgSrc: 'https://img-blog.csdnimg.cn/a0d98281da88480aa8be2e0dbda23fd6.jpg',
      isPlay: false
    },
    computed: {
      // 根据isplay计算播放状态
      state() {
        if (this.isPlay) {
          return 'running'
        } else {
          return 'paused'
        }
      },
      // 根据状态决定是否播放
      animationState() {
        return {
          animationPlayState: this.state
        }
      }
    },
    methods: {
      handlePlay() {
        // console.log("fdsadfa")
        this.isPlay = true
      },
      handlePause() {
        this.isPlay = false
      }
    }

  })
</script>
</body>
<style>
    #app {
        width: 100%;
    }

    .image {
        display: block;
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 10px solid rgba(0, 0, 0, 0.3);
        animation: rotateImg 10s linear infinite;
    }

    @keyframes rotateImg {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .btnContainer {
        /*margin: 0 auto ;*/
        display: flex;
        justify-content: center;
    }

    button:nth-child(1) {
        margin-right: 5px;
    }

</style>
</html>

就是动态控制style的值，希望播放歌曲的时候他是一个循环旋转的效果，通过按钮控制isplay 之后通过isplay控制state是running和paused,从而通过 animation-play-state 控制动画是暂停还是播放，关于动画：https://www.w3school.com.cn/css/css3_animations.asp

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^