Question

我正在使用JQM 1.4和骨干网。

在我的项目开始时，我正在使用配置文件来禁用JQM路由器，而是使用主干路由器，它以编程方式调用JQM“changePage”方法进行哈希更改。

但是我有太多问题让它按照我想要的方式工作，而我从changePage需要的只是CSS3过渡。

我最好的选择是找到一种方法来使用jquery移动过渡（幻灯片，弹出，淡入淡出......）而不使用changePage。如果我可以在DIV上使用这些过渡，那将是完美的。

有关如何做到这一点的任何线索？我知道有像effeckt.css这样的精美库，但我认为JQM是更符合移动设备的跨浏览器（如果我错了，请纠正我）。

Answer 1

jQuery Mobile中的动画类可以找到here。要使用它们，您需要做的就是添加动画类名称，例如fade以及动画类，in或out。

此外，请确保在animation结束后通过收听animationend事件删除这些类。

$("element")
    .addClass("in pop")
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
    $(this)
        .removeClass("in pop"); /* remove animation classes */
});

更新1

检查浏览器的动画/转换支持，下面应该返回true。

$.support.cssAnimations
$.support.cssTransitions
$.support.cssTransform3d

例如

if (!$.support.cssAnimations) {
  /* don't animate */
}

更新2

不支持 Transform3d 的浏览器的默认后备转换为fade。通过检查当前浏览器是否支持 Transform3d 。

，更新以下代码以反映这一点

详细

我们想要动态地设置以下div动画in或out。

<!-- buttons for demo -->
<a href="#" class="ui-btn ui-btn-inline" data-custom="in">Animate-in</a>
<a href="#" class="ui-btn ui-btn-inline" data-custom="out">Animate-out</a>
<!-- divs -->
<div class="animateDiv" data-transition="pop"></div>
<div class="animateDiv" data-transition="flip"></div>

将data-transition属性添加到div，该属性应等于动画类。此外，添加data-custom或任何自定义data属性，以定义您设置动画的方向，无论是in还是out。

然后用JS控制它们。

$(document).on("pagecreate", function (e, ui) {
    /* check support */
    var support = $.support.cssTransform3d && $.support.cssTransitions && $.support.cssAnimations ? true : false;

    $(".ui-btn").on("click", function () {
        var direction = $(this).data("custom"); /* in or out */
        $(".animateDiv").each(function () {
            var animation = support ? $(this).data("transition") + " " + direction : "fade " + direction; /* set "fade" if support is false */
            $(this).addClass(animation);
        });
    });

    $(document).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".out, .in", function (e) {
        var outORin = $(this).hasClass("in") ? "in" : "out",
            animated = support ? $(this).data("transition") : "fade";
        $(this).removeClass(animated);
    });
});

Demo - Code

Demo - Code （后备）

<强> Bonus Demo

JQuery mobile - 使用转换而不使用changePage

1 个答案:

更新1

更新2

详细