如何让火鸡在点击时跳跃

Question

我已经搜索了网络，并且我偶然发现的所有资源都没有在我的情况下工作。当我点击红色圆圈时，我需要火鸡跳。这是我的代码。顺便说一句，它在 js html 和 css 中。

function animate() {
  document.getElementById("body").class = "bodyAnim";
  document.getElementById("beak").class = "beakAnim";
  document.getElementById("eyes").class = "eyesAnim";
  document.getElementById("pupils").class = "pupilsAnim";
  document.getElementById("tail").class = "tailAnim";
  document.getElementById("snood").class = "snoodAnim";
  document.getElementById("legRight").class = "legRightAnim";
  document.getElementById("legLeft").class = "legLeftAnim";
}

.body {
  padding: 30px 30px;
  height: 35px;
  width: 5px;
  border-radius: 50%;
  background-color: brown;
  position: relative;
  top: 0px;
  animation-name: turkey;
  animation-duration: 1s; 
}
.beak {
  padding: 1px 1px;
	width: 1px;
	height: 1px;
	border-top: 10px solid transparent;
	border-left: 25px solid #ffc800;
	border-bottom: 5px solid transparent;
  position: relative;
  left: 40px;
  top: 40px;
  animation-name: beak;
  animation-duration: 1s;
}
.eyes {
  padding: 10px 10px;
  width: 10px;
  height:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: -80px;
  animation-name: eyes;
  animation-duration: 1s;
}
.pupils {
  padding: 5px 5px;
  width: 3px;
  height: 3px;
   border-radius: 50%;
  background-color:black;
  position: relative;
  top:-100px;
  animation-name: pupils;
  animation-duration: 1s;
}
.snood {
  padding: 5px 5px;
  width: 1px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: -254px;
  right: -38px;
  animation-name: snood;
  animation-duration: 1s;
}
.legRight {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -219px;
  right: 9px;
  transform: rotate(30deg);
  animation-name: legRight;
  animation-duration: 1s;
}
.legLeft {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -242px;
  left: 3px;
  transform: rotate(30deg);
  animation-name: legLeft;
  animation-duration: 1s;
}
.obstacle {
  height: 100px;
  width: 10px;
  background-color: black;
  animation: obstacle 2.2s infinite;
  position: relative;
  top: -460px;
}
body {
  background-color: lightblue;
}

<center>
  <br><br><br><br><br><br>
  <div class="turkey">
    <tr>
      <td>
        <div class="turkey beak"></div>
      </td>
      <td>
        <div class="turkey body"></div>
      </td>
    </tr>
    <div class="turkey eyes"></div>
    <div class="turkey pupils"></div>
    <style>
      .tail {
        width: 20px;
        height: 150px;
        border-radius: 50%;
        background-color: brown;
        position: relative;
        top: -200px;
        right: 59px;
        transform: rotate(-30deg);
        animation-name: tail;
        animation-duration: 1s;
      }
    </style>
    <div class="turkey tail" id="tailId"></div>
    <div class="turkey snood"></div>
    <div class="turkey legRight"></div>
    <div class="turkey legLeft"></div>
  </div>
  <style>
    @keyframes turkey {
      0% {
        top: 0px;
      }
      50% {
        top: -200px;
      }
      100% {
        top: 0px;
      }
    }

    @keyframes beak {
      0% {
        top: 40px;
      }
      50% {
        top: -160px;
      }
      100% {
        top: 40px;
      }
    }

    @keyframes eyes {
      0% {
        top: -80px;
      }
      50% {
        top: -280px;
      }
      100% {
        top: -80px;
      }
    }

    @keyframes pupils {
      0% {
        top: -100px;
      }
      50% {
        top: -300px;
      }
      100% {
        top: -100px
      }
    }

    @keyframes snood {
      0% {
        top: -250px;
      }
      50% {
        top: -450px;
      }
      100% {
        top: -250px;
      }
    }

    @keyframes legRight {
      0% {
        top: -219px;
      }
      50% {
        top: -419px;
      }
      100% {
        top: -219px;
      }
    }

    @keyframes legLeft {
      0% {
        top: -242px;
      }
      50% {
        top: -442px;
      }
      100% {
        top: -242px;
      }
    }

    @keyframes tail {
      0% {
        top: -200px;
      }
      50% {
        top: -400px;
      }
      100% {
        top: -200px;
      }
    }
  </style>
  <style>
    .button {
      height: 100px;
      width: 100px;
      background-color: red;
      border-radius: 50%;
      position: relative; 
      top:-210px;
      overflow = scroll;
    }
  </style>
  <div class="button" onclick="animate()"><h1>JUMP</h1></div>
  <div class="obstacle"></div>
  <style>
    @keyframes obstacle {
      from {
        left: 370px;
      }
      to {
        left: -870px;
      }
    }
  </style>
  

所以重申我的问题，我如何让火鸡在点击时跳起来。所以在更多的技术术语中，我如何通过点击激活关键帧。 最后，如果我的代码看起来很奇怪，请告诉我。每个人都在说，修复你的代码，但我不知道怎么做。

Answer 1

好的，所以我并不为我所做的事情感到自豪，但我更改了一些必要的东西（比如添加 id 属性和重命名函数），然后将 classList.toggle 包装在 setTimeout 和有效。哈哈。请理解，这确实是让火鸡跳跃的糟糕方法，但就您的问题而言，我让代码可以工作。

<html>

<head>
  <style>
    .body {
  padding: 30px 30px;
  height: 35px;
  width: 5px;
  border-radius: 50%;
  background-color: brown;
  position: relative;
  top: 0px;
  animation-name: turkey;
  animation-duration: 1s; 
}
.beak {
  padding: 1px 1px;
    width: 1px;
    height: 1px;
    border-top: 10px solid transparent;
    border-left: 25px solid #ffc800;
    border-bottom: 5px solid transparent;
  position: relative;
  left: 40px;
  top: 40px;
  animation-name: beak;
  animation-duration: 1s;
}
.eyes {
  padding: 10px 10px;
  width: 10px;
  height:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: -80px;
  animation-name: eyes;
  animation-duration: 1s;
}
.pupils {
  padding: 5px 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color:black;
  position: relative;
  top:-100px;
  animation-name: pupils;
  animation-duration: 1s;
}
.snood {
  padding: 5px 5px;
  width: 1px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: -254px;
  right: -38px;
  animation-name: snood;
  animation-duration: 1s;
}
.legRight {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -219px;
  right: 9px;
  transform: rotate(30deg);
  animation-name: legRight;
  animation-duration: 1s;
}
.legLeft {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -242px;
  left: 3px;
  transform: rotate(30deg);
  animation-name: legLeft;
  animation-duration: 1s;
}
.obstacle {
  height: 100px;
  width: 10px;
  background-color: black;
  animation: obstacle 2.2s infinite;
  position: relative;
  top: -460px;
}
body {
  background-color: lightblue;
}
    </style>
</head>

<body>
  <center>
    <br><br><br><br><br><br>
    <div class="turkey">


      <div id="beak" class="turkey beak"></div>


      <div id="body" class="turkey body"></div>


      <div id="eyes" class="turkey eyes"></div>
      <div id="pupils" class="turkey pupils"></div>
      <style>
        .tail {
        width: 20px;
        height: 150px;
        border-radius: 50%;
        background-color: brown;
        position: relative;
        top: -200px;
        right: 59px;
        transform: rotate(-30deg);
        animation-name: tail;
        animation-duration: 1s;
      }
    </style>
      <div id="tail" class="turkey tail" id="tailId"></div>
      <div id="snood" class="turkey snood"></div>
      <div id="legRight" class="turkey legRight"></div>
      <div id="legLeft" class="turkey legLeft"></div>
    </div>
    <style>
      @keyframes turkey {
      0% {
        top: 0px;
      }
      50% {
        top: -200px;
      }
      100% {
        top: 0px;
      }
    }

    @keyframes beak {
      0% {
        top: 40px;
      }
      50% {
        top: -160px;
      }
      100% {
        top: 40px;
      }
    }

    @keyframes eyes {
      0% {
        top: -80px;
      }
      50% {
        top: -280px;
      }
      100% {
        top: -80px;
      }
    }

    @keyframes pupils {
      0% {
        top: -100px;
      }
      50% {
        top: -300px;
      }
      100% {
        top: -100px
      }
    }

    @keyframes snood {
      0% {
        top: -250px;
      }
      50% {
        top: -450px;
      }
      100% {
        top: -250px;
      }
    }

    @keyframes legRight {
      0% {
        top: -219px;
      }
      50% {
        top: -419px;
      }
      100% {
        top: -219px;
      }
    }

    @keyframes legLeft {
      0% {
        top: -242px;
      }
      50% {
        top: -442px;
      }
      100% {
        top: -242px;
      }
    }

    @keyframes tail {
      0% {
        top: -200px;
      }
      50% {
        top: -400px;
      }
      100% {
        top: -200px;
      }
    }
  </style>
    <style>
      .button {
      height: 100px;
      width: 100px;
      background-color: red;
      border-radius: 50%;
      position: relative; 
      top:-210px;
      overflow = scroll;
    }
  </style>
    <div class="button" onclick="jump()">
      <h1>JUMP</h1>
    </div>
    <div class="obstacle"></div>
    <style>
      @keyframes obstacle {
      from {
        left: 370px;
      }
      to {
        left: -870px;
      }
    }
  </style>

  </center>
  <script type="text/javascript">
    function jump() {
      document.getElementById("body").classList.toggle("body");
      document.getElementById("beak").classList.toggle("beak");
      document.getElementById("eyes").classList.toggle("eyes");
      document.getElementById("pupils").classList.toggle("pupils");
      document.getElementById("tail").classList.toggle("tail");
      document.getElementById("snood").classList.toggle("snood");
      document.getElementById("legRight").classList.toggle("legRight");
      document.getElementById("legLeft").classList.toggle("legLeft");
      setTimeout(() => {
        document.getElementById("body").classList.toggle("body");
        document.getElementById("beak").classList.toggle("beak");
        document.getElementById("eyes").classList.toggle("eyes");
        document.getElementById("pupils").classList.toggle("pupils");
        document.getElementById("tail").classList.toggle("tail");
        document.getElementById("snood").classList.toggle("snood");
        document.getElementById("legRight").classList.toggle("legRight");
        document.getElementById("legLeft").classList.toggle("legLeft");
      }, 0)
    }
  </script>
</body>

</html>