๐ปtransition ์ถ๊ฐํ๊ธฐ๐ป
JavaScript์์ transition์ ์ถ๊ฐํ๊ธฐ ์ํด ํ์ด๋จธ๋ฅผ ์ฌ์ฉํ๋ค.
์์๋ฅผ ํด๋ฆญํ๋ฉด, ํ์ ์ ํ๊ณ ๋ค์ ํด๋ฆญํ๋ฉด ํ์ ์ ๋ฉ์ถ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 150px;
height: 150px;
background-color: tomato;
margin: 100px;
}
</style>
</head>
<body>
<h1>transition ์ถ๊ฐํ๊ธฐ</h1>
<div id="box">์์</div>
</body>
</html>
์ด๋ฒคํธ
<script>
const box = document.getElementById('box');
let degree =0;
let timer =0;
box.addEventListener('click', function() {
//ํ์ด๋จธ ์ ์ด
if (timer == 0) {
timer = setInterval(function () {
box.style.transform = `rotate(${degree}deg)`;
degree++;
}, 10);
} else {
clearInterval(timer);
timer=0;
}
});
</script>
์ ๋ฐฉ๋ฒ์ script๋ก๋ง ์กฐ์ํ๋ ๋ฐฉ๋ฒ์ผ๋ก ํ์ฌ๋ ์ด๋ฒคํธ์ ์์ฑ์ ๋ํ ๋ณํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์์ ํ๊ณ , ํ์ด๋จธ ์ญํ ์ CSS์ transition์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ์ CSS ํจ๊ป ์ฌ์ฉํ๋ ์ถ์ธ์ด๋ค.
JavaScript + CSS ๊ฐ์ด ์ฌ์ฉํ๊ธฐ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 150px;
height: 150px;
background-color: tomato;
margin: 100px;
transition: all 1s linear;
}
</style>
</head>
<body>
<h1>transition ์ถ๊ฐํ๊ธฐ</h1>
<div id="box">์์</div>
<script>
const box = document.getElementById('box');
let degree =0;
let timer =0;
box.addEventListener('click', function() {
box.style.transform = `rotate(${Math.random()*360}deg)`;
});
</script>
</body>
</html>์์ ๊ฐ์ด ์์ฑํ๋ฉด ์์๋ ํ๋ฒ ํด๋ฆญํ ๋๋ง๋ค ๋๋คํ ๊ฐ๋๋ก ํ์ ํ๋ค.
