Css JQuery Mobile 1.4.5右面板动画

我在一些页面的右侧使用jquerymobile1.4.5外部面板，这些页面还具有类ui响应面板，因此主要内容将根据面板宽度调整大小，以显示其全部内容

面板还包含data dismissible=“false”，因为在面板打开时，主要内容中包含一些表单控件和用户交互

面板通过“显示”动画显示自己，这会导致页面主要内容首先滑到页面最左侧，然后调整到剩余页面宽度

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

---

是否有一种简单的方法可以避免页面最左边的主要部分最初向左滑动，而是让主要内容在面板动画期间从右侧平滑地减小其大小？

下面是使用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”的面板一起使用时，主体中的类“ui responsive Panel”不再是必需的，并且可以删除，因为面板高度可以轻松调整为仅填充页面内容高度（信用：）

通过添加

“bottom”：footerH

，调整浏览器窗口的大小时，面板也很好地填充了整个页面的内容高度

Panel: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”的面板非常相似在面板响应页面中：一个很好的平滑动画-而且没有每个JQM页面上面板包装器的开销，页眉和页脚工具栏始终可以全宽使用，不会收缩

完整演示：

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
    });
}

.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);
}