Page transitions don't work on tabs as transition classes are activated when hiding/showing pages. You can create your own transitions, use third party CSS transitions or use jQM default ones.
First, you need to listen to tabbeforeactivate
event. This event omits a ui
object containing data of previous (ui.oldPanel
) and next panel (ui.newPanel
). All you need is to add animation classes to ui-newPanel
and remove them once animation ends by binding Animation End one time only using .one()
.
$("#tabs").on("tabbeforeactivate", function (e, ui) {
$(ui.newPanel)
.addClass("animation")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("animation");
});
});
Demo - Custom animation by Daneden
Demo - jQM default transitions