gpt4 book ai didi

javascript - jquery dlmenu动画不流畅

转载 作者:行者123 更新时间:2023-11-28 06:26:15 25 4
gpt4 key购买 nike

我使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com