capture test

by ShaCP

HTML

<div>

</div>
<div>

</div>

CSS

div {
width: 100px;
height: 100px;
background-color: blue;
margin: 1em;
transition: 1s transform linear;
}

.rotate {
  transform: rotate(90deg);
}

.pink {
  background-color: pink;
}

div::before {
  content: "text";
  display: inline-block;
  transition: 1s transform linear;
}

.pink::before {
  transform: rotate(90deg);
}

JavaScript

document.body.addEventListener("click", (e) => {
console.log("running")
/*   if (e.target.localName !== "div") {
    return;
  } */

const children = [...e.currentTarget.children];
  children.forEach((child) => child.classList.toggle("rotate"));
}, {once: true});

document.body.addEventListener("transitionstart", (e) => {
console.log("running 2")
/*   if (e.target.localName !== "div") {
    return;
  } */
  if (!e.target.className.includes("pink"))
e.target.classList.toggle("pink");
});