jquery - 閉じるボタンをクリックした後にjquerymobileパネルの幅を変更すると、望ましくない効果でパネルが閉じます

Question

モバイル インターフェイスの.ui-panelの幅を変更したかったので、メディア クエリ内で次のように変更しました (css で)

.ui-panel{width: 310px !important}

しかし、今私がそれを閉じるとき。17em の終了点に達するとヒッチを示します

ここからこのソリューションを試しました：jQuery Mobile panel width

助言がありますか ？

Answer 1

overlayまたはpushパネルの幅を変更する場合translate3d、幅に合わせてアニメーション プロパティも更新する必要があります。デフォルトでは、パネルの幅は17emで、デフォルトのアニメーションx位置は-17emです。

/* left panel - overlay and push */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
  left: 0;
  -webkit-transform: translate3d(-310px,0,0);
     -moz-transform: translate3d(-310px,0,0);
          transform: translate3d(-310px,0,0);
}

/* right panel - overlay and push */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
  right: 0;
  -webkit-transform: translate3d(-310px,0,0);
     -moz-transform: translate3d(-310px,0,0);
          transform: translate3d(-310px,0,0);
}