Angular.js에서 fade-in, fade-out 트랜지션 애니메이션 설정시 position: absolute 하지 않아도 되는 꿀팁

그렇다. 어제 늦은 밤에 잠에 들었다가 금방 깨가지고는, 이대로 오지 않을 것 같은 잠을 붙들려고 노력하는 것보다 차라리 코딩이라도 하는 것이 내 삶에 조금은 더 도움이 될 거라 판단, 새벽부터 잠도 자지 않고 여태까지 노력했으나 사실상 해결한 문제는 거의 없고 그렇다고 뭔가를 많이 배우고 이해한 것도 아니고 여전히 할 일은 남아 있으나 또 피곤한 건 몹시도 피곤한, 정말 불편한 하루를 보냈다. 그래도 내 정성에 하늘이 감동한 탓일까, 자그마한 꼼수로 그래도 이루고자 하는 것의 하나를 만족스럽게 달성했다.

SPA(단일 페이지 애플리케이션)에서 최적의 성능을 발휘하는 Angular.js에서 웹 프로그래머라면 그 고고하고 순결한 것이 꼭 이육사의 시 《청포도》의 손님을 떠올리게 하는 페이지 트랜지션 애니메이션을 깔끔하게 자신의 창작물에 반영해보고 싶으리라 본다. 애니메이션과 관련된 별도의 서비스를 따로 제공하는 만큼 CSS3를 사용한다고 마음만 먹으면 정말 간단한 CSS 코딩만으로 페이지가 홀랑홀랑 넘어가는 쾌감을 맛볼 수 있다. 그러나 하나 문제점은 있다. Opacity를 조절해야 하는 애니메이션의 경우 사라져야 할 페이지와 나타나야 할 페이지가 동시에 화면에 출력된 상태에서 애니메이션이 진행되기 때문에 ng-view 요소를 position: absolute로 묶어두어야 자연스러운 애니메이션이 가능하다는 것이다.

처음에는 어떻게든 CSS 트릭을 부려서 position: absolute로 스타일링을 한 채 원래의 디자인을 유지하려고 했으나 몇 시간을 노력해도 뾰족한 수가 생기지 않았다. jQuery를 기반으로 했다면 매우 간단하게 해당 요소에 높이를 지정하고 여차저차 스크립트가 좀 지저분한 코드로 승부를 봤겠지만 DOM 조작이 쉽지 않은 Angular에서는, 고작 인터넷 수업 몇 번 들어본 나 같은 초짜에게는 그 쪽으로도 좀처럼 길이 뚫리지 않았다. 이미 지난 십수시간 동안 실패만을 거듭해 사기가 바닥이던 나는 사무실 근처에 돼지국밥을 먹으러 갔다.

그리고 괜찮은 꼼수가 하나 생각났다. 사실 문제를 처음부터 이 방면에서 해결해보겠다고 마음 먹었다면 한참 전에 해결했을 수도 있었으리라는 생각이 들었지만, 지나간 시간을 아쉬워 할 필요는 없다. 기가 막히게 문제를 해결하고 아주 기쁜 마음에 빨리 블로그에 접속해 글을 적고 있다.

해결책은 사실 뭐 이렇게 적기도 좀 민망할 정도로 간편하다. ng-view 요소의 클래스를 임의로 .fade라고 했다고 하면, 바로 아래의 CSS 트랜지션 코드만으로 충분한 것이다.

.fade.ng-enter {
  -webkit-transition: all 1s ease 1s;
  -moz-transition: all 1s ease 1s;
  -o-transition: all 1s ease 1s;
  transition: all 1s ease 1s;
}
.fade.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

그렇다. 보통의 예제에서 .ng-enter와 .ng-leave 클래스를 한 번에 묶어서 스타일링을 하고 있는데, 저 두 클래스를 분리한 뒤 fade-in 효과에 fade-out 효과의 시간만큼만 딜레이를 주면 되는 것이다. 해결책이 너무나 간단해서 더 지나간 시간이 고통스럽게 느껴지지만 나는 단조증가로 발전하는 프로그래머이기 때문에 이 정도 일은 컴가지상사로 생각하고 넘긴다.

흑흑. 내 시간, 내 잠.