Skip to content

M
mui
Commit 19207e34 authored by hbcui1984's avatar hbcui1984
Browse files
Options

webview模式选项卡在iOS平台支持“整体移动”动画效果

parent 97f670a2
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 97 deletions
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html
View file @ 19207e34
...@@ -104,19 +104,13 @@ ...@@ -104,19 +104,13 @@
//plusReady事件后，自动创建menu窗口； //plusReady事件后，自动创建menu窗口；
mui.plusReady(function() { mui.plusReady(function() {
main = plus.webview.currentWebview(); main = plus.webview.currentWebview();
menu = mui.openWindow({ menu = mui.preload({
id: 'offcanvas-drag-left-plus-menu', id: 'offcanvas-drag-left-plus-menu',
url: 'offcanvas-drag-left-plus-menu.html', url: 'offcanvas-drag-left-plus-menu.html',
styles: { styles: {
left: "30%", left: "30%",
width: '70%', width: '70%',
zindex: 9997 zindex: 9997
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
} }
}); });
}); });
...@@ -132,53 +126,44 @@ ...@@ -132,53 +126,44 @@
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白； //同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px"; document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
} }
//侧滑菜单处于隐藏状态，则立即显示出来； //侧滑菜单处于隐藏状态，则立即显示出来；
// menu.show('none', 0, function() { //显示完毕后，根据不同动画效果移动窗体；
switch (mode){ menu.show('none', 0, function() {
case 'main-move': switch (mode){
menu.show('none',0,function () { case 'main-move':
//主窗体开始侧滑；
}); main.setStyle({
//主窗体开始侧滑； left: '-70%',
main.setStyle({ transition: {
left: '-70%', duration: 150
transition: { }
duration: 150 });
} break;
}); case 'menu-move':
// console.log('main:'+menu.getStyle().left+','+menu.getStyle().zindex);
break;
case 'menu-move':
// console.log('menu-1:'+menu.getStyle().left+','+menu.getStyle().zindex);
menu.show('none',0,function () {
menu.setStyle({ menu.setStyle({
left: '30%', left: '30%',
transition: { transition: {
duration: 150 duration: 150
} }
}); });
}); break;
break; case 'all-move':
case 'all-move': main.setStyle({
main.setStyle({ left: '-70%',
left: '-70%', transition: {
transition: { duration: 150
duration: 150 }
} });
}); menu.setStyle({
menu.setStyle({ left: '30%',
left: '30%', transition: {
transition: { duration: 150
duration: 150 }
} });
}); break;
break; }
} });
// });
//显示主窗体遮罩 //显示主窗体遮罩
mask.show(); mask.show();
showMenu = true; showMenu = true;
......
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html
View file @ 19207e34
...@@ -109,12 +109,6 @@ ...@@ -109,12 +109,6 @@
left: 0, left: 0,
width: '70%', width: '70%',
zindex: 9997 zindex: 9997
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
} }
}); });
}); });
...@@ -123,51 +117,51 @@ ...@@ -123,51 +117,51 @@
*/ */
function openMenu() { function openMenu() {
if (!showMenu) { if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来； //侧滑菜单处于隐藏状态，则立即显示出来；
menu.show('none', 0, function() { //显示完毕后，根据不同动画效果移动窗体；
switch (mode){ menu.show('none', 0, function() {
case 'main-move': switch (mode){
//主窗体开始侧滑； case 'main-move':
main.setStyle({ //主窗体开始侧滑；
left: '70%', main.setStyle({
transition: { left: '70%',
duration: 150 transition: {
} duration: 150
}); }
break; });
case 'menu-move': break;
menu.setStyle({ case 'menu-move':
left: '0%', menu.setStyle({
transition: { left: '0%',
duration: 150 transition: {
} duration: 150
}); }
break; });
case 'all-move': break;
main.setStyle({ case 'all-move':
left: '70%', main.setStyle({
transition: { left: '70%',
duration: 150 transition: {
} duration: 150
}); }
menu.setStyle({ });
left: '0%', menu.setStyle({
transition: { left: '0%',
duration: 150 transition: {
} duration: 150
}); }
break; });
} break;
}); }
//显示遮罩 });
mask.show(); //显示遮罩
showMenu = true; mask.show();
} showMenu = true;
} }
/** }
* 关闭侧滑菜单 /**
*/ * 关闭侧滑菜单
*/
function closeMenu() { function closeMenu() {
if (showMenu) { if (showMenu) {
//关闭遮罩； //关闭遮罩；
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment