Index
transition의 사전적 의미는 "이행, 전환"이라는 뜻을 가지고 있습니다. 여기서는 전환의 의미로서 효과가 변경되었을 때 부드럽게 처리해주는 개념으로 이해하시면 됩니다.
1부에서 CSS transition에 대해서 배우셨을 겁니다. CSS transition에 비해서 JS transition은 비교적 코드가 길며 복잡하고 가독성이 떨어집니다. 하지만 간단한 transition 조차 JS(자바스크립트)를 통해서 했었어야 하는 시절이 있었습니다. 이번 장에서는 간단한 JS transition 예시를 통해 이전에는 transition을 어떻게 구현했는지 알아보는 시간을 갖도록 하겠습니다. 또한 css transition의 상태에 따른 이벤트를 추가적으로 보여드리겠습니다.
JS transition은 현재 CSS transition의 많은 장점 때문에 많이 사용하지 않으므로 간단한 예제를 보여드리는 방향으로 진행하겠습니다.
[예제1]
<!doctype html>
<html>
<head>
<script>
function change(color){
var value = document.getElementById("rs_div");
if(color=="red")
value.style.color = "red";
else if(color=="blue")
value.style.color = "blue";
else if(color=="green")
value.style.color = "green";
}
</script>
</head>
<body>
<input type="button" value="red" onclick="change(this.value)" />
<br>
<input type="button" value="blue" onclick="change(this.value)" />
<br>
<input type="button" value="green" onclick="change(this.value)" />
<br>
<div id="rs_div">JS transition</div>
</body>
</html>
위 코드를 실행하면 다음과 같은 결과가 나옵니다. 해당하는 버튼을 누르면 버튼에 맞게 글자 색깔이 바뀝니다.
[예제2]
<!DOCTYPE html>
<html>
<head>
<title>접속 시간에 따라 변하는 배경색</title>
</head>
<body>
<script>
var current = new Date(); // 현재 시간
if(current.getSeconds() % 3 == 0){
document.body.style.backgroundColor = "red";
document.write("빨강색");
}
else if(current.getSeconds() % 3 == 1){
document.body.style.backgroundColor = "blue";
document.write("파랑색");
}
else{
document.body.style.backgroundColor = "green";
document.write("초록색");
}
</script>
</body>
</html>
위 코드를 실행하면 페이지에 접속하는 시간에 따라 배경색깔이 달라집니다.
다음으로 CSS transition의 상태에 대해 배워보겠습니다. 먼저 1부 css transition에서 css transition의 속성에 대해서 배우셨을 겁니다. 따라서 delay, duration, property, timing-funtion과 같은 css transition의 속성에 대해서는 충분히 아신다고 생각하고 css transiton의 상태에 대해서 설명드리겠습니다.
css transition의 상태는 4가지로 분류할 수 있습니다.