markocupic/asyn_await_with_transitions.html

## asyn_await_with_transitions.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #outerBox {
          display: inline-flex;
          flex-wrap: wrap;
          width: 100%;
      }

      .box {
          font-family: Helvetica, sans-serif;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: red;
          margin: 10px;
          height: 100px;
          width: 100px;
          transition: all 1.5s linear;
          cursor: pointer;
      }

      .box.animate {
          background-color: green;
          cursor: default;
      }

      .box.animated {
          background-color: green;
          cursor: default;
      }

      .box.animated:hover {
          animation: shake-base 0.25s infinite;
      }

      @keyframes shake-base {
          0% {
              transform: translate(0, 0) rotate(0deg);
          }
          25% {
              transform: translate(5px, 5px) rotate(5deg);
          }
          50% {
              transform: translate(0, 0) rotate(0deg);
          }
          75% {
              transform: translate(-5px, 5px) rotate(-5deg);
          }
          100% {
              transform: translate(0, 0) rotate(0deg);
          }

      }

  </style>
</head>

<body>
<h1>ASYNC AWAIT WITH TRANSITIONS</h1>

<div id="outerBox"></div>

<script>
    const animate = (box) =>
        new Promise((resolve) => {
            box.classList.add('animate');
            box.addEventListener("transitionend", () => {
                resolve()
            });
        });

    const run = async () => {
        let number = 1000;
        for (let i = 0; i <= number; i++) {
            const box = document.createElement('div');
            box.innerHTML = '<div class="inner" type="button">click me!</div>';
            box.classList.add('box');
            document.getElementById('outerBox').appendChild(box);
            await box.addEventListener('click', async (e) => {
                const el = e.target.classList.contains('box') ? e.target : e.target.parentNode;
                await animate(el);
                box.querySelector('.inner').innerText = 'completed!';
                box.classList.add('animated');
                box.classList.remove('animate');
            }, {
                'once': true
            });
        }

        // wait for the next tick setTimout for 1 ms
        await new Promise(resolve => setTimeout(resolve, 1));
    }

    window.addEventListener("DOMContentLoaded", (event) => {
        run();
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	#outerBox {
	display: inline-flex;
	flex-wrap: wrap;
	width: 100%;
	}

	.box {
	font-family: Helvetica, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: red;
	margin: 10px;
	height: 100px;
	width: 100px;
	transition: all 1.5s linear;
	cursor: pointer;
	}

	.box.animate {
	background-color: green;
	cursor: default;
	}

	.box.animated {
	background-color: green;
	cursor: default;
	}

	.box.animated:hover {
	animation: shake-base 0.25s infinite;
	}

	@keyframes shake-base {
	0% {
	transform: translate(0, 0) rotate(0deg);
	}
	25% {
	transform: translate(5px, 5px) rotate(5deg);
	}
	50% {
	transform: translate(0, 0) rotate(0deg);
	}
	75% {
	transform: translate(-5px, 5px) rotate(-5deg);
	}
	100% {
	transform: translate(0, 0) rotate(0deg);
	}

	}

	</style>
	</head>

	<body>
	<h1>ASYNC AWAIT WITH TRANSITIONS</h1>

	<div id="outerBox"></div>

	<script>
	const animate = (box) =>
	new Promise((resolve) => {
	box.classList.add('animate');
	box.addEventListener("transitionend", () => {
	resolve()
	});
	});

	const run = async () => {
	let number = 1000;
	for (let i = 0; i <= number; i++) {
	const box = document.createElement('div');
	box.innerHTML = '<div class="inner" type="button">click me!</div>';
	box.classList.add('box');
	document.getElementById('outerBox').appendChild(box);
	await box.addEventListener('click', async (e) => {
	const el = e.target.classList.contains('box') ? e.target : e.target.parentNode;
	await animate(el);
	box.querySelector('.inner').innerText = 'completed!';
	box.classList.add('animated');
	box.classList.remove('animate');
	}, {
	'once': true
	});
	}

	// wait for the next tick setTimout for 1 ms
	await new Promise(resolve => setTimeout(resolve, 1));
	}

	window.addEventListener("DOMContentLoaded", (event) => {
	run();
	});
	</script>
	</body>
	</html>