JQuery mobile - 在不使用 changePage 的情况下使用转换

Question

我同时使用 JQM 1.4 和骨干网。

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

但是我有太多问题要让它按我的意愿工作，而我需要的 changePage 只是 CSS3 过渡。

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

关于如何做到这一点的任何线索？我知道有像 effeckt.css 这样的优秀库，但我认为 JQM 更兼容移动跨浏览器（如果我错了，请纠正我）。

Answer 1

可以在here 找到 jQuery Mobile 中的动画类。要使用它们，您需要做的就是添加 动画类名，例如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 的浏览器的默认 fallback 转换是 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 属性来定义您的div 动画的方向，无论是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