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

你必须使用这样的插件：animationClasses“in”和“out”而不是“classin”和“classout”

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