电梯动画 CSS HTML JS(带逻辑)
[英]Elevator Animation CSS HTML JS(With Logic)
问题描述
I am trying to get an elevator animation.
我正在尝试制作电梯动画。
So basically there are 5 floors and whichever floor you click the elevator is suppose to move animated to that floor.所以基本上有 5 层楼，无论你点击电梯的哪个楼层都应该动画移动到该楼层。
I have tried using keyframes with no success also tried transform:translateY()我尝试使用关键帧但没有成功也尝试过 transform:translateY()
But it doesn't work the way I want to.但它并没有按照我想要的方式工作。 IE when I click on the 4th floor the active elevator appears on the third and moves to the 4th something like that. IE 当我点击 4 楼时，活动电梯出现在 3 楼并移动到 4 楼，类似这样。
Later on I am going to need to use promises in order to implement the logic.稍后我将需要使用 Promise 来实现逻辑。 IE The elevator is on the first floor and it gets called to 5th floor. IE 电梯在一楼，它被召唤到五楼。 If someone pushes the 3rd floor button before the elevator passes the 3rd floor it needs to stop and then move again to the 5th floor.如果有人在电梯通过 3 楼之前按下 3 楼按钮，则电梯需要停止，然后再次移动到 5 楼。 You know standard logic.你知道标准逻辑。
So I would love to hear how should I proceed what should I look into.所以我很想听听我应该如何进行我应该调查的内容。
HTML HTML
<!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>
*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 CSS
* {
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;
}
2 个解决方案
解决方案1
0 2022-05-06 00:04:23
You need an element that will move.你需要一个会移动的元素。 I adjusted your code to utilize a new <div class="elevator"></div> element that can be moved outside of the elevator shaft/floors.我调整了您的代码以利用新的<div class="elevator"></div>元素，该元素可以移动到电梯井/楼层之外。 From there, get the clicked floor's position from top of document and then move elevator element there via GSAP (or any other way of animating you wish).从那里，从文档顶部获取单击楼层的位置，然后通过 GSAP（或您希望的任何其他动画方式）将电梯元素移动到那里。 Example included包含示例
// 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));
* { 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; }
<!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>
解决方案2
0 2022-07-12 22:17:04
I would probably only create a elevator box with absolute position (css) and change the class when you select a specific floor, so there's one class for each floor, some class that add a bottom position for example.我可能只会创建一个具有绝对位置（css）的电梯盒，并在您选择特定楼层时更改类，因此每个楼层都有一个类，例如添加底部位置的类。 I'm currently creating an elevator myself for a xstate demo, I'll share you the link, maybe it will help.我目前正在自己为 xstate 演示创建电梯，我将与您分享链接，也许它会有所帮助。
Mine (react, typescript, xstate) (the logic is almost done, what's missing is some styles) https://codesandbox.io/s/react-ts-xstate-elevator-pdb2g4我的（react、typescript、xstate）（逻辑差不多完成了，缺少的是一些样式） https://codesandbox.io/s/react-ts-xstate-elevator-pdb2g4
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.