javascript - jquery dlmenu动画不流畅

Question

我使用 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;
    }
}

Answer 1

你必须像这样使用插件:使用动画类“in”和“out”而不是“classin”和“classout”

$(function() {
  $( '#dl-menu' ).dlmenu({
    animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' }
  });
});