解決
私はばかで、ページの読み込み時に要素に動的に追加data-role="content"して#wrapperいたため、JQM で認識できませんでした。
基本的なメニュー パネルを実装しようとしていますが、アニメーション化または閉じることができません。
以下は、JQM によって生成される基本的なマークアップです。
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-body-c ui-page-panel ui-page-active">
<div id="menu-panel" data-role="panel" data-position="left" data-display="reveal" data-dismissible="true" class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-panel-closed ui-body-c ui-panel-animate">
<div class="ui-panel-inner">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
<div id="wrapper" data-role="content">
<a href="#menu-panel" id="btn-menu" data-role="button" data-position="left" data-reveal="reveal" data-dismissible="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all"><span class="ui-btn-inner"><span class="ui-btn-text"></span></span></a>
<!-- Page content -->
</div>
</div>
#wrapper の CSS:
#wrapper {
margin: 0 auto;
min-height: 100%;
padding: 0;
position: relative;
width: 100%;
}
パネルとボタンに冗長なデータの役割を配置するのは間違っているように思えますが、公式ドキュメントを含め、私が見たすべての例はそのようになっています。
パネルが表示されますが、CSS 変換は使用されません。また、ページのコンテンツをプッシュしたり、イベントで閉じたりすることもありません。