vue控制图片旋转demo

最新推荐文章于 2025-09-28 14:09:07 发布

原创最新推荐文章于 2025-09-28 14:09:07 发布 · 3.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

demo 专栏收录该内容

4 篇文章

订阅专栏

本文展示了如何使用Vue.js动态控制CSS动画，通过点击按钮实现图片的旋转和暂停效果。利用`v-bind`指令结合计算属性，根据`isPlay`状态更新`animation-play-state`，从而控制图片的旋转动画。

在这里插入图片描述

<!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