jQuery mobile 1.1.0 stable버전의 transition handler에 대한 잡설.

몇 주전에 기다리고 기다리던 jQuery mobile 1.1.0 stable 버전이 릴리즈 되었습니다. ( http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/ )

이거저거 바뀐 부분도 많지만, 개인적으로 흥미가 가는 부분은 transition 부분입니다.
transition이 부드럽고 빨라졌다고 써져 있긴 하지만, 실제로는 android에서의 transition은 거의 포기한 것과 마찬가지로 보입니다. 특히 slide 효과의 경우는 fade효과가 곁들여져 있는게 좋은지 없는게 좋은지는 device 혹은 상황마다 다르니 사용자가 알아서 써라!라는 뜻에서 slidefade라는 effect가 추가되었습니다.

slide를 쓸지 slidefade를 쓸지는 demo페이지만 해당 device에서 돌려봐도 금방 파악할 수 있는 문제이니, 잡설은 이정도에서 그치고, transition 코드 상에서의 흥미로운 변화를 살펴보도록 하죠.

1.1.0 RC2까지만 해도 transition handler는 1개만 존재했었는데, 1가지 종류의 handler로는 무리가 있는듯하여 2가지 종류의 default handler를 추가했습니다. 바로 sequential handler와 simulataneous handler입니다.
   
jquery mobile의 transition의 동작은, 다음과 같습니다. (내부함수명 기준)
startOut --> doneOut --> startIn --> doneIn

함수명에서 유추가능하듯이 startOut은 사라질 페이지에 대해 effect를 주는 함수이며, doneOut은 해당 effect가 끝나는 시점에 수행되서 마무리해주는 함수, startIn은 새로 전환되는 페이지에 effect를 주는 함수이고 doneIn은 새 페이지에 대한 effect가 끝날때 호출되는 함수입니다.
즉, page1에서 page2로 전환이 일어난다고 가정하면, 지금 말씀드린 순서로 수행될 경우에는 page1이 모두 사라지고 나서 page2가 나타나기 시작하는 것입니다. 이것이 sequential입니다.
그럼 simultaneous는 말그대로 동시에 모든 effect가 일어나는 것입니다. page1의 사라지는 효과와 page2의 나타나는 효과가 동시에 수행되는 것이죠.

아래 코드를 보시면, jqm 내부적으로 앞에서 이야기드린 두가지 handler를 사용하고 있는 것을 볼 수 있습니다.

// generate the handlers from the above
var sequentialHandler = createHandler(),
    simultaneousHandler = createHandler( false );

기본적으로는 sequential handler를 쓰지만,

// Make our transition handler the public default.
$.mobile.defaultTransitionHandler = sequentialHandler;

slide transition에 대해서만 simultaneous handler를 쓰는 것을 확인할 수 있습니다.

// Use the simultaneous transition handler for slide transitions
$.mobile.transitionHandlers.slide = $.mobile.transitionHandlers.simultaneous;

이정도만 이해하시면, 두 가지 핸들러를 자유자재로 선택해서 사용하실 수 있을 것입니다.