0

我目前正在使用 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>

我有什么遗漏的吗？如何使过渡更加突出？

4

1 回答 1

0

好吧，我知道这有点晚了，但我只是想通了这一点，并认为我可能会发布。

问题是这样的：转换的名称“myTransition”作为“name”参数传递给 myTransitionHandler 函数。

由于您在 myTransitionHandler 中实现了所有样板文件（来自 css 转换处理程序），因此“myTransition”需要作为 .myTransition.in 和 .myTransition.out 存在于您的 css 中。

因此，要解决此问题，您需要：

  1. 在你的 CSS 中添加 .myTransition.in 和 .myTransition.out 规则。或者
  2. 只需在 myTransitionHandler 函数的开头将“name”设置为支持的内容（如“fade”）。

我认为这是你的问题，希望这有助于...

于 2012-10-24T19:03:34.967 回答