作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 jquery dlmenu plugin 创建了多级导航菜单v1.0.2 demo2.
一切正常,除了 CSS3 菜单导航不像 jQuery 左/右滑动功能那样流畅。
有没有什么解决方案可以在不更改插件的情况下解决这个问题?
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimOut2 0.3s ease-in-out forwards;
animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
@-webkit-keyframes MenuAnimOut2 {
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
@-moz-keyframes MenuAnimOut2 {
100% {
-moz-transform: translateX(-100%);
opacity: 0;
}
}
@keyframes MenuAnimOut2 {
100% {
transform: translateX(-100%);
opacity: 0;
}
}
.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimIn2 0.3s ease-in-out forwards;
animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
@-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-moz-keyframes MenuAnimIn2 {
0% {
-moz-transform: translateX(-100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
@keyframes MenuAnimIn2 {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
最佳答案
你必须像这样使用插件:使用动画类“in”和“out”而不是“classin”和“classout”
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' }
});
});
关于javascript - jquery dlmenu动画不流畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35268053/
我正在使用 Hipstr Jekyll theme它使用了 jQuery 插件 dlmenu ,响应式菜单。 Hipstr's about page滚动条根本不出现。所以问题略有不同,但我们都没有让它
我正在使用 dlmenu,它工作正常。 但我已经把我的网站放在了顶行。当屏幕尺寸小于 992px 时,我在移动设备上使用 dlmenu。当我滚动时,我看到粘贴菜单,但当我单击它时,它不起作用。但如果我
我是一名优秀的程序员,十分优秀!