Как заставить Турцию прыгнуть на клике - PullRequest
Новая
       25

Как заставить Турцию прыгнуть на клике

0 голосов
/ 02 декабря 2018

Я просмотрел сеть, и все источники, на которые я наткнулся, не сработали в моем случае.Мне нужна индейка, чтобы прыгать, когда я нажимаю на красный круг.Вот мой код.Кстати, это в 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>
Итак, чтобы повторить мой вопрос, Как я могу заставить индейку прыгать на клике.Итак, в более технических терминах, как активировать ключевые кадры одним щелчком мыши.Наконец, если мой код выглядит странно, пожалуйста, скажите мне.Все говорили, исправь свой код, но я не знаю как.

1 Ответ

0 голосов
/ 02 декабря 2018

Хорошо, поэтому я не горжусь тем, что я сделал, но я изменил пару необходимых вещей (например, добавив 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>
...