Bootstrap Dropdown Animate(アニメーション拡張)

/**
 * Project: Bootstrap Animate Dropdown
*Author:開拓者<[email protected]>
 * Version: v1.0.0
 * Dependencies: Bootstrap's Dropdown plugin, CSS3
*Description:BootstrapのDropdownプラグインにアニメーション効果を追加します.
 * License: MIT
 */
/*
*bootstrap-animate-dropdownのCSSスタイル
*使用方法
*1:はい.dropdownにアニメーション拡張を加える.dropdown-animateスタイルクラス
*2:はい.dropdown-toggleに属性data-animateを加える
*注意事項
*bootstrap-hover-dropdown.min.jsプラグインは同時に使用され、コードを少し変更する必要があります.
*例をあげますよ.ソースバージョンを見てください.80行ぐらいです.

// handle submenus
$parent.find('.dropdown-submenu').each(function (){
    var $this = $(this);
    var subTimeout;
    $this.hover(function () {
        window.clearTimeout(subTimeout);
        // 2015-11-04 10:20:05   By  <[email protected]>
        // $this.children('.dropdown-menu').show();
        $this.addClass('open').triggerHandler('show.bs.submenu');
        // always close submenu siblings instantly
        // 2015-11-04 10:20:05   By  <[email protected]>
        // $this.siblings().children('.dropdown-menu').hide();
        $this.siblings('.open').removeClass('open').triggerHandler('hide.bs.submenu');
    }, function () {
        // 2015-11-04 10:20:05   By  <[email protected]>
        // var $submenu = $this.children('.dropdown-menu');
        subTimeout = window.setTimeout(function () {
            // 2015-11-04 10:20:05   By  <[email protected]>
            // $submenu.hide();
            $this.removeClass('open').triggerHandler('hide.bs.submenu');
        }, settings.delay);
    });
});

*欠点
*もう1つは、1級メニューがCSSで予定されているシーケンスより大きい場合に問題がありますが、実際に遭遇した場合は自分で追加してください.
 */

/* */
    .dropdown.dropdown-animate .dropdown-menu,
    .dropdown-toggle[data-animate] ~ .dropdown-menu,
    .dropdown-toggle[data-animate] ~ .dropdown-menu .dropdown-submenu .dropdown-menu {
        opacity: 0;
        display: block;
        visibility: hidden;
    }
    .dropdown.dropdown-animate > .dropdown-menu,
    .dropdown-toggle[data-animate] ~ .dropdown-menu {
        -webkit-transform: translate3d(0, 30%, 0);
        -moz-transform: translate3d(0, 30%, 0);
        -o-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0);
        -webkit-transition: all .15s ease .25s;
        -moz-transition: all .15s ease .25s;
        -o-transition: all .15s ease .25s;
        transition: all .15s ease .25s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu,
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu {
        opacity: 1;
        visibility: visible;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
/* */
    .dropdown.dropdown-animate > .dropdown-menu>li,
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li {
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li,
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }
/* ,  9 ,  。*/
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(1),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(1),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(1),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(1) {
        -webkit-transition: all .15s ease .15s;
        -moz-transition: all .15s ease .15s;
        -o-transition: all .15s ease .15s;
        transition: all .15s ease .15s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(2),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(2),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(2),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(2) {
        -webkit-transition: all .15s ease .2s;
        -moz-transition: all .15s ease .2s;
        -o-transition: all .15s ease .2s;
        transition: all .15s ease .2s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(3),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(3),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(3),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(3) {
        -webkit-transition: all .15s ease .25s;
        -moz-transition: all .15s ease .25s;
        -o-transition: all .15s ease .25s;
        transition: all .15s ease .25s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(4),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(4),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(4),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(4) {
        -webkit-transition: all .15s ease .3s;
        -moz-transition: all .15s ease .3s;
        -o-transition: all .15s ease .3s;
        transition: all .15s ease .3s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(5),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(5),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(5),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(5) {
        -webkit-transition: all .15s ease .35s;
        -moz-transition: all .15s ease .35s;
        -o-transition: all .15s ease .35s;
        transition: all .15s ease .35s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(6),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(6),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(6),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(6) {
        -webkit-transition: all .15s ease .4s;
        -moz-transition: all .15s ease .4s;
        -o-transition: all .15s ease .4s;
        transition: all .15s ease .4s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(7),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(7),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(7),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(7) {
        -webkit-transition: all .15s ease .45s;
        -moz-transition: all .15s ease .45s;
        -o-transition: all .15s ease .45s;
        transition: all .15s ease .45s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(8),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(8),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(8),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(8) {
        -webkit-transition: all .15s ease .5s;
        -moz-transition: all .15s ease .5s;
        -o-transition: all .15s ease .5s;
        transition: all .15s ease .5s;
    }
    .open.dropdown.dropdown-animate > .dropdown-menu>li:nth-of-type(9),
    .open .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-of-type(9),
    .dropdown.dropdown-animate > .dropdown-menu>li:nth-last-of-type(9),
    .dropdown-toggle[data-animate] ~ .dropdown-menu>li:nth-last-of-type(9) {
        -webkit-transition: all .15s ease .55s;
        -moz-transition: all .15s ease .55s;
        -o-transition: all .15s ease .55s;
        transition: all .15s ease .55s;
    }
/* */
    .dropdown.dropdown-animate .dropdown-menu li.dropdown-submenu .dropdown-menu,
    .dropdown-toggle[data-animate] ~ .dropdown-menu li.dropdown-submenu .dropdown-menu{
        -webkit-transform: translateX(20%);
        -moz-transform: translateX(20%);
        -o-transform: translateX(20%);
        transform: translateX(20%);
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
    .dropdown.dropdown-animate .dropdown-menu li.dropdown-submenu .dropdown-menu>li,
    .dropdown-toggle[data-animate] ~ .dropdown-menu li.dropdown-submenu .dropdown-menu>li {
        opacity: 0;
        -webkit-transition: all .25s ease .15s;
        -moz-transition: all .25s ease .15s;
        -o-transition: all .25s ease .15s;
        transition: all .25s ease .15s;
    }
    .dropdown.dropdown-animate .dropdown-menu li.dropdown-submenu .dropdown-menu>li:nth-of-type(odd),
    .dropdown-toggle[data-animate] ~ .dropdown-menu li.dropdown-submenu .dropdown-menu>li:nth-of-type(odd) {
        -webkit-transform: translateX(20%);
        -moz-transform: translateX(20%);
        -o-transform: translateX(20%);
        transform: translateX(20%);
    }
    .dropdown.dropdown-animate .dropdown-menu li.dropdown-submenu .dropdown-menu>li:nth-of-type(even),
    .dropdown-toggle[data-animate] ~ .dropdown-menu li.dropdown-submenu .dropdown-menu>li:nth-of-type(even) {
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -o-transform: translateX(-20%);
        transform: translateX(-20%);
    }
    .dropdown.dropdown-animate .dropdown-menu li.dropdown-submenu.open > .dropdown-menu,
    .dropdown-toggle[data-animate] ~ .dropdown-menu li.dropdown-submenu.open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }
    .dropdown.dropdown-animate .dropdown-menu li.dropdown-submenu.open > .dropdown-menu>li,
    .dropdown-toggle[data-animate] ~ .dropdown-menu li.dropdown-submenu.open .dropdown-menu>li {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
    }