文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >电梯动画CSS HTML JS(与逻辑)

问电梯动画CSS HTML JS(与逻辑)
EN

Stack Overflow用户
提问于 2022-05-05 11:29:26
回答 2查看 410关注 0票数 0

我想要一部电梯动画。

基本上有5层，无论你点击哪个楼层，电梯都会被动画地移动到那层楼。

我尝试过使用关键帧但没有成功也尝试了转换:translateY()

但这不像我想的那样。也就是说，当我点击4楼时，活动电梯出现在第三层，并移动到第四层，类似这样。

稍后，我将需要使用承诺来实现逻辑。也就是说，电梯在一楼，它被叫到五楼。如果有人在电梯经过三楼之前按下三楼的按钮，它需要停下来，然后再移到五楼。你知道标准逻辑。

所以我很想听听我该怎么做，我应该研究什么。

HTML

代码语言：javascript
复制
<!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>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="building-elevator">
        <div class="building">
          <div class="floor floor-5">Fifth floor</div>
          <div class="floor floor-4">Fourth floor</div>
          <div class="floor floor-3">Third floor</div>
          <div class="floor floor-2">Second floor</div>
          <div class="floor floor-1">First floor</div>
        </div>
        <div class="elevator">
          <div class="elevator-floor elevator-floor-5"></div>
          <div class="elevator-floor elevator-floor-4"></div>
          <div class="elevator-floor elevator-floor-3"></div>
          <div class="elevator-floor elevator-floor-2"></div>
          <div class="elevator-floor elevator-floor-1 elevator-active"></div>
        </div>
      </div>
    </div>
  </body>
</html>
代码语言：javascript
复制
*JS*

// Elevator written with promises that will be used to simulate an elevator system.
// The elevator will be able to move up and down, and will be able to stop at floors.
// The elevator will be able to be controlled by a user.
// Whenever a button is pressed, the elevator will move to that floor.
// If multiple buttons are pressed, the elevator will move to the first pressed floor.
// if the elevator is going up and the user presses a button, the elevator will stop at the floor.

const firstFloor = document.querySelector(".elevator-floor-1");
const secondFloor = document.querySelector(".elevator-floor-2");
const thirdFloor = document.querySelector(".elevator-floor-3");
const fourthFloor = document.querySelector(".elevator-floor-4");
const fifthFloor = document.querySelector(".elevator-floor-5");
const allFloors = document.querySelectorAll(".elevator-floor");

const floors = [firstFloor, secondFloor, thirdFloor, fourthFloor, fifthFloor];
const activeFloor = floors.filter((e) =>
  e.classList.contains("elevator-active")
)[0];
function makeActive(floor) {
  allFloors.forEach((el) => el.classList.remove("elevator-active"));
  floor.target.classList.add("elevator-active");
}

floors.forEach((e) => e.addEventListener("click", makeActive));

console.log(activeFloor.classList);

CSS

代码语言：javascript
复制
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(114, 93, 235);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.building {
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(1, 9, 19);
  border-radius: 10px;
  width: 20rem;
  height: 30rem;
}

.elevator {
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(40, 82, 133);
  border-radius: 10px;
  width: 4rem;
  height: 30rem;
}

.building-elevator {
  display: flex;
}

.floor {
  border-radius: 10px;
  height: 20%;
}

.floor-1 {
  background-color: rgb(132, 236, 236);
}

.floor-2 {
  background-color: rgb(154, 243, 142);
}
.floor-3 {
  background-color: rgb(156, 163, 163);
}

.floor-4 {
  background-color: rgb(217, 228, 120);
}

.floor-5 {
  background-color: rgb(233, 114, 187);
}

.elevator-floor {
  border-radius: 10px;
  height: 20%;
  cursor: pointer;
}

.elevator-floor-1 {
  background-color: rgb(233, 114, 187);
}
.elevator-floor-2 {
  background-color: rgb(217, 228, 120);
}
.elevator-floor-3 {
  background-color: rgb(132, 236, 236);
}
.elevator-floor-4 {
  background-color: rgb(154, 243, 142);
}
.elevator-floor-5 {
  background-color: rgb(156, 163, 163);
}

.elevator-active {
  transition: 300ms ease-in;
  background-color: orangered;
}
javascript
css
EN

回答 2

Stack Overflow用户

发布于 2022-05-06 00:04:23

你需要一个能移动的元素。我调整了您的代码，以利用一个新的<div class="elevator"></div>元素，可以移动到电梯轴/楼层之外。从那里，从文档顶部获取点击楼层的位置，然后通过GSAP (或任何其他动画方式)将电梯元素移动到那里。例子包括

​

代码语言：javascript
复制
// Elevator written with promises that will be used to simulate an elevator system.
// The elevator will be able to move up and down, and will be able to stop at floors.
// The elevator will be able to be controlled by a user.
// Whenever a button is pressed, the elevator will move to that floor.
// If multiple buttons are pressed, the elevator will move to the first pressed floor.
// if the elevator is going up and the user presses a button, the elevator will stop at the floor.

const elevator = document.querySelector(".elevator");
const firstFloor = document.querySelector(".elevator-floor-1");
const secondFloor = document.querySelector(".elevator-floor-2");
const thirdFloor = document.querySelector(".elevator-floor-3");
const fourthFloor = document.querySelector(".elevator-floor-4");
const fifthFloor = document.querySelector(".elevator-floor-5");
const allFloors = document.querySelectorAll(".elevator-floor");

const floors = [firstFloor, secondFloor, thirdFloor, fourthFloor, fifthFloor];
const activeFloor = floors.filter((e) =>
  e.classList.contains("elevator-active")
)[0];

const makeActive = (floor) => {
  allFloors.forEach((el) => el.classList.remove("elevator-active"));
  floor.target.classList.add("elevator-active");
}

floors.forEach((e) => e.addEventListener("click", makeActive));

//
// New JS
//

// Get floor's position from top of document and then move elevator there via GSAP
const moveElevator = (floor) => {
  let topPos = floor.target.getBoundingClientRect().top; //Get floor's position from top
      topPos += window.scrollY; //Adjust for scroll depth
  gsap.to(elevator, {top:topPos, duration:0.3}) //GSAP animation
}
floors.forEach((e) => e.addEventListener("click", moveElevator));
代码语言：javascript
复制
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(114, 93, 235);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.building {
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(1, 9, 19);
  border-radius: 10px;
  width: 20rem;
  height: 30rem;
}

.elevator-shaft {
position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(40, 82, 133);
  border-radius: 10px;
  width: 4rem;
  height: 30rem;
}

.building-elevator {
  display: flex;
}

.floor {
  border-radius: 10px;
  height: 20%;
}

.floor-1 {
  background-color: rgb(132, 236, 236);
}

.floor-2 {
  background-color: rgb(154, 243, 142);
}

.floor-3 {
  background-color: rgb(156, 163, 163);
}

.floor-4 {
  background-color: rgb(217, 228, 120);
}

.floor-5 {
  background-color: rgb(233, 114, 187);
}

.elevator-floor {
  border-radius: 10px;
  height: 20%;
  cursor: pointer;
}

.elevator-floor-1 {
  background-color: rgb(233, 114, 187);
}

.elevator-floor-2 {
  background-color: rgb(217, 228, 120);
}

.elevator-floor-3 {
  background-color: rgb(132, 236, 236);
}

.elevator-floor-4 {
  background-color: rgb(154, 243, 142);
}

.elevator-floor-5 {
  background-color: rgb(156, 163, 163);
}

.elevator {
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  width: 100%;
  height: 20%;
  cursor: pointer;
  background-color: orangered;
}
代码语言：javascript
复制
<!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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">
    <div class="building-elevator">
      <div class="building">
        <div class="floor floor-5">Fifth floor</div>
        <div class="floor floor-4">Fourth floor</div>
        <div class="floor floor-3">Third floor</div>
        <div class="floor floor-2">Second floor</div>
        <div class="floor floor-1">First floor</div>
      </div>
      <div class="elevator-shaft">
        <div class="elevator-floor elevator-floor-5"></div>
        <div class="elevator-floor elevator-floor-4"></div>
        <div class="elevator-floor elevator-floor-3"></div>
        <div class="elevator-floor elevator-floor-2"></div>
        <div class="elevator-floor elevator-floor-1"></div>
        <div class="elevator"></div>
      </div>
    </div>
  </div>
</body>

</html>

​

票数 0
EN

Stack Overflow用户

发布于 2022-07-12 22:17:04

我可能只会创建一个带有绝对位置(css)的电梯盒，并在选择特定楼层时更改该类，因此每层都有一个类，例如添加一个底部位置的某个类。我目前正在为xstate演示创建一个电梯，我将与您分享这个链接，也许它会有所帮助。

我的(react，typescript，xstate) (逻辑几乎完成了，缺少的是一些样式) https://codesandbox.io/s/react-ts-xstate-elevator-pdb2g4

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72126421

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档