JQuery Mobile 1.4.5 右面板动画

Posted 2023-05-09

【中文标题】JQuery Mobile 1.4.5 右面板动画

【英文标题】：JQuery Mobile 1.4.5 right panel animation

【发布时间】：2015-08-01 20:48:42

【问题描述】：

我在一些页面的右侧使用了一个 JQuery Mobile 1.4.5 的外部面板，并且页面也有 ui-responsive-panel 类，以便主要内容根据面板宽度调整大小以显示它的全部内容。

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

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

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

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

【参考方案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" 的面板一起使用时，主体中的“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，面板也可以在调整浏览器窗口大小时很好地填充整个页面内容高度。

面板：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 页面上面板包装器的开销以及页眉和页脚工具栏始终以全宽可用而不会缩小。

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