Javascript Slideout.js菜单不平滑
我一直在努力让slideout.js在我的网站上正常工作 问题在于,当菜单打开时,文本在完全打开之前出现,当菜单关闭时,文本在菜单关闭后消失 我已经看过CSS,确保菜单有背景,高度设置正确 演示(以移动方式查看)- JS: CSS: 页面上的Javascript Slideout.js菜单不平滑,javascript,css,menu,sidebar,Javascript,Css,Menu,Sidebar,我一直在努力让slideout.js在我的网站上正常工作 问题在于,当菜单打开时,文本在完全打开之前出现,当菜单关闭时,文本在菜单关闭后消失 我已经看过CSS,确保菜单有背景,高度设置正确 演示(以移动方式查看)- JS: CSS: 页面上的元素似乎没有任何转换CSS 例如,您的元素应用了以下转换: transition: -webkit-transform 300ms ease 0s; transform: translateX(-256px) 无论您有什么javascript触发了元素的转
元素似乎没有任何转换CSS
例如,您的
元素应用了以下转换:
transition: -webkit-transform 300ms ease 0s; transform: translateX(-256px)
无论您有什么javascript触发了
元素的转换,如果应用到
中,都会导致文本和
中的所有内容正确转换。您可以发布导致问题的html和.js的相关代码吗?CSS和js已经发布了。我将尝试这个,但是如果你查看slideout.js的演示站点,它没有这个功能,而且很流畅。我从中获取了完整的示例代码,并将其放在a中,“菜单”文本仍然无法正确转换。
.slideout-menu {
position: fixed;
top: 80px;
bottom: 0;
width: 256px;
/* min-height: 100vh; */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 999;
display: none;
padding-left:20px;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #ffffff; /* A background-color is required */
min-height: 100%;
-webkit-box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
@media screen and (min-width: 1000px) {
.slideout-panel {
/* margin-left: 256px; */
}
.slideout-menu {
display: none;
}
}
.panel:before {
content: '';
display: block;
background-color: rgba(0,0,0,0);
transition: background-color 0.5s ease-in-out;
}
.panel-open:before {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,.5);
z-index: 99;
}
transition: -webkit-transform 300ms ease 0s; transform: translateX(-256px)