时间戳

首页 > 解决方案 > 使用 Javascript 的动画或将 CSS 链接到 Javascript

javascript - 使用 Javascript 的动画或将 CSS 链接到 Javascript

问题描述

由于我是 HTML、Javascript 和 CSS 的新手，有什么好心人可以帮助我的程序吗？在我的 CSS 中，我有 4 个不同的动画到不同的位置。因此，例如，如果我想做一个案例结构，例如，按 A 表示机器人 A，按 B 表示机器人 B，依此类推。

下面将是我的 CSS 部分的程序。希望有人能帮助我。或者无论如何，我可以将我的 CSS 链接到 javascript？

<style>

#robot {
  position: fixed;
  top: 280px;
  left: 600px;
  border-radius: 50%;
  width: 50px;
  height: 60px;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name:robot;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }

  #robot2 {
    position: fixed;
    top: 180px;
    left: 500px;
    border-radius: 50%;
    width: 50px;
    height: 60px;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name:robot2;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    }
    #robot3 {
      position: fixed;
      top: 180px;
      left: 400px;
      border-radius: 50%;
      width: 50px;
      height: 60px;
      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
      animation-name:robot3;
      animation-duration: 5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      }
      #robot4 {
        position: fixed;
        top: 180px;
        left: 300px;
        border-radius: 50%;
        width: 50px;
        height: 60px;
        -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
        animation-name:robot4;
        animation-duration: 5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        }

body {
  height: 100%;
  width: 100%;
  background-image: url('TPHRG floorplan1.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background-position: center; */
  background-size: 980px 400px, cover;
}


/* Safari 4.0 - 8.0 */

 @-webkit-keyframes robot {
 0%  {top: 280px;left:600px;}
 50% {top: 180px;left:600px;}
 100% {top: 180px;left:500px;}
}

@-webkit-keyframes robot2 {
from {top: 180px;left:500px;}
to {top: 180px;left:400px;}

}
@-webkit-keyframes robot3 {
from {top: 180px;left:400px;}
to {top: 180px;left:300px;}

}
@-webkit-keyframes robot4 {
from {top: 180px;left:300px;}
to {top: 180px;left:200px;}

}


</style>

标签： javascripthtmlcss

解决方案

我想目前您的动画会自动运行。为了使它们在某些事件上工作，请使用transition.

这是工作代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .robot_start_left {
        height: 20px;
        width: 20px;
        background-color: red;
        position: relative;
        left: 0px;
        transition: left 1s;
      }

      .robot_start_top {
        top: 0px;
        transition: top 1s;
      }

      .robot_end_top {
        top: 100px;
      }

      .robot_end_left {
        left: 100px;
      }
    </style>
</head>
<body onkeydown = 'move(event)'>
 <div class="robot_start_left robot_start_top" id="app"></div>  
  <script>
    var move = function (event) {
      if(event.keyCode === 65) {
        const appDiv = document.getElementById('app');
        appDiv.classList.add("robot_end_left")
      }

      if(event.keyCode === 66) {
        const appDiv = document.getElementById('app');
        appDiv.classList.add("robot_end_top")
      }
    }
  </script>
</body>
</html>

更新

按 A 将机器人向左 -> 向右移动。

按 B 移动机器人顶部 -> 底部

祝你有美好的一天 ！！

推荐阅读