jquery-mobile - 如何为 jQuery Mobile 选项卡设置动画

Question

我想为 jQuery Mobile 选项卡内容设置动画。我有 2 个选项卡。您从左侧选项卡开始，显示其内容。当您单击右侧选项卡时，右侧选项卡的内容会从右侧滑入。我有这部分工作。我正在为我的动画使用这个脚本:

$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
    $(ui.newPanel).addClass("in slide").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass("in slide");
    });
});

在这里查看 JSFiddle: http://jsfiddle.net/69om1nsc/4/

并感谢 Omar 对这个 stackoverflow 的回答: Data-transition effects does not work with tab navigation jquery mobile

以下是我需要帮助的内容:当您单击左侧选项卡时，我希望左侧选项卡的内容从左侧滑入。目前，它正从右侧滑入。我对 Javascript 不是很有经验，在 jQuery Mobile 的网站上找不到任何可以帮助我的东西。

谁能帮我修改脚本，以便在单击左侧选项卡时，其内容从左侧进入？

谢谢!

Answer 1

检查newPanel和oldPanel的.index()，如果.index() newPanel 大于 oldPanel 的索引，添加类 reverse。

$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
    var reverse = ui.newPanel.index() < ui.oldPanel.index() ? " reverse" : "",
        classes = "in slide" + reverse;
    $(ui.newPanel).addClass(classes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass(classes);
    });
});

Demo