Загрузите неминифицированную версию файла CSS для jQuery Mobile и скопируйте классы для определенных переходов, которые вы хотите.
CSS можно найти здесь: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css
И код для переходов начинается со строки 1270. Если вы скопируете все классы CSS для переходов, это всего лишь около 6 КБ информации.
Вот пример кода из вышеуказанного файла CSS:
.viewport-flip {
-webkit-perspective: 1000;
position: absolute;
}
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
width: 100%;
height: 100%;
overflow: hidden;
}
.flip {
-webkit-animation-duration: .65s;
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}
.flip.out {
-webkit-transform: rotateY(-180deg) scale(.8);
-webkit-animation-name: flipouttoleft;
}
.flip.in {
-webkit-transform: rotateY(0) scale(1);
-webkit-animation-name: flipinfromleft;
}
Таким образом, чтобы вставить элемент, вы должны добавить класс .flip и класс .in, а чтобы включить элемент, вы должны добавить класс .flip и класс .out.
Также jQuery CSS включает только префиксы -webkit-, но если вы хотите поддерживать больше браузеров, вы можете добавить другие префиксы, такие как: -moz-, -o- и т. Д.