JQuery Mobile 1.4.5 右面板动画

Question

我在某些页面的右侧使用 JQuery Mobile 1.4.5 外部面板，这些页面也有 class ui-responsive-panel，以便根据面板宽度调整主要内容的大小以显示其全部内容。

面板也有 data-dismissible="false" 因为主要内容是面板打开时的一些表单控件和用户交互。

面板通过 "reveal" 动画显示自身，这会导致页面主要内容首先滑动到页面的最左侧，然后调整为剩余的页面宽度。

<div data-role="panel" data-position="right" data-position-fixed="true" data-display="reveal" data-dismissible="false">
</div>

这是我用来自定义 JQM 右侧面板的CSS：

.ui-panel {
    width: 25em;
}
.ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right {
    margin-left: 25em;
}
.ui-panel-page-content-position-right,
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    left: 0;
    right: -25em;
}
.ui-panel-animate.ui-panel-page-content-position-right.ui-panel-page-content-display-reveal {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(-25em,0,0);
    -moz-transform: translate3d(-25em,0,0);
    transform: translate3d(-25em,0,0);
}

有没有一种简单的方法可以避免最初向左滑出页面最左侧的主要部分，而是让主要内容从右侧平滑地缩小[=24] =]在面板动画期间？

Answer 1

下面是使用 jQuery animate() 方法的可能解决方案。假设仅使页面内容响应就足够了，因为整页动画（包括工具栏）不是必需的：

$(".ui-panel").on("panelbeforeopen", function (event, ui) {
    $(".ui-page-active .ui-content").animate({
        "margin-right": "50%"
    }, 300,"swing");
});

$(".ui-panel").on("panelbeforeclose", function (event, ui) {
    $(".ui-page-active .ui-content").animate({
        "margin-right": "0%"
    }, 300,"swing",function()
                    {
                        $(this).removeAttr("style");
                    });
});

此外，当与带有 data-display="overlay" 的面板一起使用时，不再需要主体中的 class "ui-responsive-panel"并且可以删除，因为可以轻松调整面板高度以仅填充页面内容高度（致谢：jQuery mobile panel between header and footer）。

function scalePanelToContent() {
    var screenH = $.mobile.getScreenHeight();
    var headerH = $(".ui-header").outerHeight() - 1;
    var footerH = $(".ui-footer").outerHeight() - 1;
    var panelH = screenH - headerH - footerH;
    $(".ui-panel").css({
      "top": headerH,
      "bottom": footerH,
      "min-height": panelH
    });
}

通过添加 "bottom": footerH，当浏览器 window 调整大小时，面板也能很好地填充整个页面内容高度。

面板：CSS 面板动画经过最少的改动进行了调整，使用的标准与 jQuery 实际用于过渡和动画支持的标准相同：

.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay {
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
}

从用户体验的角度来看，最终结果非常接近于在面板响应页面中使用带有 data-display="push" 或 data-display="reveal" 的面板：a漂亮流畅的动画 - 此外，没有每个 JQM 页面上面板包装器的开销，并且页眉和页脚工具栏始终以全宽显示而不会缩小。

完整演示：http://jsfiddle.net/e6Cnn/38/

JQuery Mobile 1.4.5 右面板动画

JQuery Mobile 1.4.5 right panel animation

css

panel

jquery-mobile