jQuery mobile: Как создать пользовательский переход на страницу

Question

В настоящее время я разрабатываю мобильное приложение с использованием jQuery/CSS/HTML, и я хочу добавить свой собственный переход на страницу, когда я нажимаю кнопку «назад». Но я не могу найти настоящие хорошие учебники онлайн о том, как это сделать. Я хочу создать пользовательский цвет «переход» или что-то заметное, чтобы я знал, что переход на самом деле работает, и переход по умолчанию не называется

Это то, что у меня есть на данный момент, но оно не работает и даже если это был я не думаю, что было бы достаточно заметным:

.js

function myTransitionHandler(name, reverse, $to, $from) { 

var deferred = new $.Deferred(), 
reverseClass = reverse ? " reverse" : "", 
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, 
doneFunc = function() { 

    $to.add($from).removeClass("out in reverse " + name); 

    if ($from && $from[ 0 ] !== $to[ 0 ]) { 
     $from.removeClass($.mobile.activePageClass); 
    } 

    $to.parent().removeClass(viewportClass); 

    deferred.resolve(name, reverse, $to, $from); 
}; 

$to.animationComplete(doneFunc); 

$to.parent().addClass(viewportClass); 

if ($from) { 
$from.addClass(name + " out" + reverseClass); 
} 
$to.addClass($.mobile.activePageClass + " " + name + " in" + reverseClass); 

return deferred.promise(); 
} 

// Make our transition handler public. 
$.mobile.transitionHandlers["myTransition"] = myTransitionHandler; 

.html для задней кнопки

<a href="#" data-rel="back" data-role="button" data-inline="true" data-transition="myTransition" data-direction="reverse">Back</a> 

Есть ли что-то, чего я не вижу, и как я могу сделать переход более значимым?

Answer 1

Ну, я знаю, что это немного поздно, но я просто понял это и думал, что могу опубликовать.

Проблема заключается в следующем: Имя вашего перехода, «myTransition», передается как аргумент «name» для вашей функции myTransitionHandler.

Поскольку у вас есть все файлы шаблонов, реализованные в вашем myTransitionHandler (из обработчика перехода css), «myTransition» должен существовать в вашем css как .myTransition.in и .myTransition.out.

Таким образом, чтобы это исправить, вам нужно будет либо:

1. Добавить правила .myTransition.in и .myTransition.out в вашем CSS. или
2. Просто установите «имя» на что-то поддерживаемое (например, «fade») в начале вашей функции myTransitionHandler.

Я думаю, что это ваша проблема, надеюсь, что это поможет ...