웹 애니메이션 1/3 ㅡ Transition 방식

이글은 웹에서 화면에 표시된 객체에 대한 애니메이션을 적용하는 방식 중 Transition 방식에 대한 정리입니다. 현대의 UI에 애니메이션을 적용한다는 것은 사용자에게 영감을 불어 넣을 수 있다는 점에 매우 철학적이고 세련된 방법이라고 할 수 있습니다.

먼저 아래의 화면에서 ‘터치미!’ 텍스트(div 요소)를 클릭해 보시기 바랍니다.

터치미!

클릭할 때마다 좌에서 우로.. 우에서 좌로 이동하는 것을 살펴볼 수 있습니다. 위의 예제에 대한 코스를 살펴 보겠습니다. 먼저 화면에 표시되는 ‘터치미!’에 대한 div 요소입니다.

터치미!

div에 box라는 클래스를 지정하고 있습니다. box 클래스에 대한 정의는 다음과 같습니다.

    .box {
        font-family: '맑은 고딕';
        text-align: center;
        line-height: 100px;

        width: 100px;
        height: 100px;

        background: #FFF;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);

        transform: translate(0, 0);
        transition: transform 1000ms;
    }

2번~4번 코드는 div의 ‘터치미!’ 텍스트에 대한 폰트와 정렬을 지정하고 있고, 6번~7번은 div의 너비와 높이에 대한 크기를 지정하고 있습니다. 그리고 9~10번 코드는 div의 색상과 그림자를 표시하도록 하고 있습니다. 12번은 최초의 div의 위치를 (0, 0) 좌표로 지정하고 있습니다. 13번 코드가 바로 애니메이션을 위한 transition(전환)을 지정하고 있는데, transform에 대해 1초(1ms) 동안 애니메이션이 이루어지도록 하고 있습니다. 그러나 여기서는 아직 transform에 대해 어떤 전환이 이루어질지에 대한 코드는 없습니다. 이떤 전환이 이루어지는 시점은 이 div를 클릭할 때인데, 다음의 코드가 필요합니다.

var box = document.querySelector('.box');

box.addEventListener('click', function () {
    box.classList.toggle('move');
});

box.addEventListener('transitionend', function () {
    alert('이동 완료');
}, false);

3번 코드에서 div에 대한 클릭 이벤트를 지정하고 있습니다. 즉, div에 move라는 클래스를 토글링하고 있는데요. 토글링은 해당 값이 지정되어 있으면 제거하고, 지정되어 있지 않으면 지정하는 방식입니다. move 클래스는 다음과 같습니다. (참고로 7번 코드는 하나의 애니메이션이 완료되었을 때 호출되는 함수를 지정하고 있음)

    .box.move {
        transform: translate(400px, 0);
    }

보시면 transform 속성에 대해서 x축으로 400px로 변경하고 있습니다.

답글 남기기 응답 취소