我正在尝试使用requestAnimationFrame转换元素：
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const box = document.querySelector(".box");
box.style.width = "80px";
box.style.position = "absolute";
box.style.transition = "all .5s ease";
box.style.left = "100px";
box.style.top = "100px";
box.style.opacity = "0"; /* <== add here */
// box.classList.add("opacity-0");
requestAnimationFrame(() => {
requestAnimationFrame(() => {
box.style.left = "200px";
box.style.top = "200px";
box.style.opacity = "1"; /* <== add here */
// box.classList.remove("opacity-0");
// box.classList.add("opacity-1");
box.addEventListener("transitionend", () => {
// box.classList.remove("opacity-1");
box.style.position = "";
box.style.transition = "";
box.style.width = "";
box.style.left = "";
box.style.top = "";
box.style.opacity = "";
});
});
});
});
但是在第10行和第17行设置了opacity属性之后，转换就不起作用了。
如果我评论掉其中的任何一行，过渡就会重新开始。顺便说一句，如果我不评论任何一行，并将第17行从box.style.opacity = "1"设置为box.style.opacity = "0.99"，则翻译可以工作，但没有不透明度转换。
这很奇怪，我也不知道。(正如你所看到的，我试图切换classList而不是JS中的编码风格，但失败了。(
为什么？
这里是html和css:
<div class="box"></div>
<button id="btn">click</button>
.box {
height: 80px;
background-color: #BDC0EF;
}
.opacity-0 {
opacity: 0;
}
.opacity-1 {
opacity: 1;
}
以下是CodePen中的演示：https://codepen.io/dinnerwithouttomato/pen/ZEooaLw
btn.addEventListener("click", () => {
const box = document.querySelector(".box");
box.style.width = "80px";
box.style.position = "absolute";
box.style.transition = "all .5s ease";
box.style.left = "100px";
box.style.top = "100px";
box.style.opacity = "1"; /* <== add here */
// box.classList.add("opacity-0");
还从css中删除.opacity-0和.opacity-1类。
如果您想要使用requestAnimationFrame。像这样使用它。
const btn = document.getElementById("btn");
const box = document.querySelector(".box");
let left1 = 100;
let top1 = 100;
let opacity1 = 0;
btn.addEventListener("click", () => {
box.style.width = "80px";
box.style.position = "absolute";
box.style.left = "100px";
box.style.top = "100px";
box.style.opacity = "0";
// box.classList.add("opacity-0");
requestAnimationFrame(anm);
});
function anm() {
left1 += 5;
top1 += 5;
opacity1 += 1/60;
box.style.left = left1 + "px";
box.style.top = top1 + "px";
// box.classList.remove("opacity-0");
// box.classList.add("opacity-1");
box.style.opacity = opacity1;
if (left1 === 400 && top1 === 400) {
cancelAnimationFrame(anm);
box.style.left = "100px";
box.style.top = "100px";
box.style.opacity = "1";
top1 = 100;
left1 = 100
opacity1 = 0;
return
}
setTimeout(() => {
requestAnimationFrame(anm);
}, 1000 / 60);
}.box {
height: 80px;
background-color: #BDC0EF;
}
.opacity-0 {
opacity: 0;
}
.opacity-1 {
opacity: 1;
}
button {
position: absolute;
top: 50%;
left: 50%;
padding: 10px;
font-size: 18px;
}<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<button id="btn">click</button>
<script src="script.js"></script>
</body>
</html>如果你想使用转换：
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const box = document.querySelector(".box");
box.style.opacity = "1";
box.style.left = "200px";
box.style.top = "200px";
box.ontransitionend = () => {
box.style.opacity = "0";
box.style.left = "100px";
box.style.top = "100px";
}
});.box {
height: 80px;
width: 80px;
background-color: #BDC0EF;
position: absolute;
top: 100px;
left: 100px;
transition: all .5s ease;
opacity: 0;
}
.opacity-0 {
opacity: 0;
}
.opacity-1 {
opacity: 1;
}
button {
position: absolute;
top: 50%;
left: 50%;
padding: 10px;
font-size: 18px;
}<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<button id="btn">click</button>
<script src="script.js"></script>
</body>
</html>