1.jquery实现

  1.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0
  6.         }
  8.         .handle {
  9.             position: absolute;
  10.             left:37%;
  11.             transform: rotate(-30deg);
  12.             transform-origin: 60px 60px;
  13.         }
  14.         .container{
  15.             position: relative;
  16.             width:600px
  17.         }
  18.         .pan{
  19.             position:absolute;
  20.             top:200px;
  21.         }
  22.         @keyframes move{
  23.             0%{
  24.                 transform:rotate(-30deg)
  25.             }
  26.             100%{
  27.                 transform:rotate(0deg)
  28.             }
  29.         }
  30.         @keyframes unmove{
  31.             0%{
  32.                 transform:rotate(0deg)
  33.             }
  34.             100%{
  35.                 transform:rotate(-30deg)
  36.             }
  37.         }
  38.         .move{
  39.             animation:move 2s forwards;
  40.         }
  41.         .unmove{
  42.             animation:unmove 2s forwards;
  43.         }
  44.     </style>
  46. <body>
  47.     <div class="container">
  48.         <img class="pan" src="images/pan.png" alt="">
  49.         <img class="handle" src="images/shou.png" alt="">
  50.     </div>
  51.     <script>
  52.         var isPlay=false;
  53.         $(".pan").click(function(){
  54.             isPlay=!isPlay;
  55.             console.log(isPlay)
  56.             if(isPlay){
  57.                 $(".handle").addClass("move").removeClass("unmove")
  58.             }else{
  59.                 $(".handle").removeClass("move").addClass("unmove")
  60.             }
  61.         })
  62.     </script>

2.vue实现

  1.    <div class="container">
  2.         <!-- {{isPlay}} -->
  3.         <img @click="handleClick" class="pan" src="images/pan.png" alt="">
  4.         <img :class="[isPlay?'move':'unmove','handle']" src="images/shou.png" alt="">
  5.     </div>
  6.     <script>
  7.         new Vue({
  8.             el:".container",
  9.             data:{
  10.                 isPlay:false
  11.             },
  12.             methods:{
  13.                 handleClick(){
  14.                     this.isPlay=!this.isPlay;
  15.                 }
  16.             }
  17.         })
  18.     </script>