ch6 - 1. transition 이벤트

Index

1. transition이란?2. JS transition과 CSS transition 차이점 3. JS transition 예시 4. css transition의 상태 4.1 transitionrun 4.2 transitionstart 4.3 transitioncancel 4.4 transitioned 4.5 예시

1. transition이란?

transition의 사전적 의미는 "이행, 전환"이라는 뜻을 가지고 있습니다. 여기서는 전환의 의미로서 효과가 변경되었을 때 부드럽게 처리해주는 개념으로 이해하시면 됩니다.

2. JS transition과 CSS transition 차이점

1부에서 CSS transition에 대해서 배우셨을 겁니다. CSS transition에 비해서 JS transition은 비교적 코드가 길며 복잡하고 가독성이 떨어집니다. 하지만 간단한 transition 조차 JS(자바스크립트)를 통해서 했었어야 하는 시절이 있었습니다. 이번 장에서는 간단한 JS transition 예시를 통해 이전에는 transition을 어떻게 구현했는지 알아보는 시간을 갖도록 하겠습니다. 또한 css transition의 상태에 따른 이벤트를 추가적으로 보여드리겠습니다.

3. JS 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>

위 코드를 실행하면 페이지에 접속하는 시간에 따라 배경색깔이 달라집니다.

4. css transition의 상태

다음으로 CSS transition의 상태에 대해 배워보겠습니다. 먼저 1부 css transition에서 css transition의 속성에 대해서 배우셨을 겁니다. 따라서 delay, duration, property, timing-funtion과 같은 css transition의 속성에 대해서는 충분히 아신다고 생각하고 css transiton의 상태에 대해서 설명드리겠습니다. css transition의 상태는 4가지로 분류할 수 있습니다.

css transition의 상태

상태

의미

transitionrun

css transition이 실행되기 시작했습니다. (지연 전 시작)

transitionstart

css transition이 시작되었습니다. (지연 후 시작)

transitioncancel

css transition이 취소되었습니다.

transitionend

css transition이 완료되었습니다.

4.1 transitionrun

transitionrun event는 css transition이 처음 생성될 때, 즉 transition-delay가 시작되기 전에 시작됩니다.

4.2 transitionstart

transitionstart event는 css transition이 실제로 시작된 경우, 즉 transition-delay가 종료 된 후에 시작됩니다.

4.3 transitioncancel

transitioncancel event는 css transition가 최소 된 상황에 실행됩니다.

4.4 transitioned

transitionend event는 css transition이 완료되면 실행됩니다.

4.5 예시


<div class="transition"></div>
<div class="message"></div>

<!-- css -->
<style type="text/css">
.transition {
  width: 150px;
  height: 150px;
  background: rgb(0,0,0);
  transition-duration: 2s;
  transition-delay: 2s
}

.transition:hover {
  background: rgb(250,250,250);
}
</style>

<!-- script -->
<script>
const message = document.querySelector('.message');
const state = document.querySelector('.transition');

state.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun';
});

state.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart';
});

state.addEventListener('transitioncancel', function() {
  message.textContent = 'transitioncancel';
});

state.addEventListener('transitionend', function() {
  message.textContent = 'transitionend';
});
</script>

css 코드는 마우스를 선택하기 전에는 검은색 화면, 마우스를 갖다 대면 흰색 계열에 가까운 회색 화면으로 전환되도록 구현하였습니다. script 코드는 위에서 설명드린 css transition 상태를 출력하도록 작성하였습니다.

코드를 작성하고 실행하시면 위와 같은 화면이 뜹니다.

마우스를 검은색 화면 위에 올려놓으면 왼쪽 화면처럼 검은색 화면과 transitionrun이 뜹니다. 현재 상황에서 마우스를 바깥쪽으로 옮기면 transitionrun → transitioncancel로 바뀌는 장면도 볼 수 있습니다.

마우스를 바깥에 옮기지 않고 상태를 유지하면 transitionstart 상태를 거쳐서 transitionend 상태까지 진행됨을 알 수 있습니다. 또한 이 과정에서 색이 점점 변하는 모습도 볼 수 있습니다. 지금까지 JS transition의 예시와 css transition의 상태에 따른 이벤트에 대해서 배워보았습니다.