Transition doesn't work after setting opacity property-CodePudding

I'm trying to use requestAnimationFrame to transition elements:

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 = "";
      });
    });
  });
});

But the transition doesn't work after setting opacity property in line 10 and line 17.

If I comment out any line of those, the transition starts to work again. Btw, If I doesn't comment any line and set line 17 from box.style.opacity = "1" to box.style.opacity = "0.99", the translation works but without opacity transition.

It's weird and I don't have any idea. (As you can see, I tried to toggle classList instead of coding style in JS, but failed.)

and why?

Here are html and css:

<div ></div>
<button id="btn">click</button>

.box {
  height: 80px;
  background-color: #BDC0EF;
}

.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 1;
}

Here is a demo in CodePen: https://codepen.io/dinnerwithouttomato/pen/ZEooaLw

CodePudding user response：

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");

also remove .opacity-0 and .opacity-1 class from css .

CodePudding user response：

If you want use requestAnimationFrame. Use it like this.

 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 ></div>
<button id="btn">click</button>
<script src="script.js"></script>
</body>
</html>

If you want use transition:

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 ></div>
    <button id="btn">click</button>
    <script src="script.js"></script>
</body>

</html>