/**
* Project: Bootstrap Animate Dropdown
* Author: 拓荒者<358279128@QQ.COM>
* Version: v1.0.0
* Dependencies: Bootstrap's Dropdown plugin, jQuery, CSS3
* Description: 给 Bootstrap 的 Dropdown 插件增加一个动画效果.
* License: MIT
*/
/*
* bootstrap-animate-dropdown
* 使用方法
* 1: 在 .dropdown 加上动画扩展 .dropdown-animate 样式类
* 2: 在 .dropdown-toggle 加上属性 data-animate
* 缺点
* 可能就是和纯CSS实现对比的话,性能略低,注意只是相对而言。
* 优点
* 没有子菜单数量的限制,会自动触发响应的事件。
* 事件
* show.bs.dropdown: 下拉展开事件;
* hide.bs.dropdown: 下拉关闭事件;
* show.bs.submenu : 子菜单展开事件;
* show.bs.submenu : 子菜单关闭事件;
*/
CSS 代码部分, 文件名: bootstrap-animate-dropdown.css
.dropdown-animate > .dropdown-menu {
opacity: 0;
display: block;
visibility: hidden;
-webkit-transform: translate3d(0, 30%, 0);
-moz-transform: translate3d(0, 30%, 0);
-o-transform: translate3d(0, 30%, 0);
transform: translate3d(0, 30%, 0);
}
.dropdown-animate.dropdown-animate-show > .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-animate.dropdown-animate-hide > .dropdown-menu {
-webkit-transition: all .25s ease .25s;
-moz-transition: all .25s ease .25s;
-o-transition: all .25s ease .25s;
transition: all .25s ease .25s;
}
.dropdown-animate > .dropdown-menu>li {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.dropdown-animate > .dropdown-menu>li.dropdown-animate-show-li {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: all .15s ease .15s;
-moz-transition: all .15s ease .15s;
-o-transition: all .15s ease .15s;
transition: all .15s ease .15s;
}
.dropdown-animate > .dropdown-menu>li.dropdown-animate-hide-li {
-webkit-transition: all .15s ease;
-moz-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}
.dropdown-animate > .dropdown-menu .dropdown-submenu .dropdown-menu{
opacity: 0;
display: block;
visibility: hidden;
-webkit-transform: scaleY(1.3);
-moz-transform: scaleY(1.3);
-o-transform: scaleY(1.3);
transform: scaleY(1.3);
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.dropdown-animate .dropdown-submenu.open > .dropdown-menu {
opacity: 1;
visibility: visible;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
.dropdown-animate .dropdown-submenu > .dropdown-menu > li {
opacity: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.dropdown-animate .dropdown-submenu.open > .dropdown-menu > li.dropdown-animate-show-sub-li {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: all .15s ease .15s;
-moz-transition: all .15s ease .15s;
-o-transition: all .15s ease .15s;
transition: all .15s ease .15s;
}
.dropdown-animate .dropdown-submenu.open > .dropdown-menu > li.dropdown-animate-hide-sub-li {
-webkit-transition: all .15s ease;
-moz-transition: all .15s ease;
-o-transition: all .15s ease;
transition: all .15s ease;
}JS 代码部分, 文件名: bootstrap-animate-dropdown.js
;
(function($, window, undefined) {
// .dropdown 的显示和隐藏的样式
var Animate_class = {
THIS: 'dropdown-animate',
SHOW: 'dropdown-animate-show',
HIDE: 'dropdown-animate-hide',
SHOW_LI: 'dropdown-animate-show-li',
HIDE_LI: 'dropdown-animate-hide-li',
SHOW_SUB_LI: 'dropdown-animate-show-sub-li',
HIDE_SUB_LI: 'dropdown-animate-hide-sub-li',
};
// 扩展一个方法
$.fn.dropdownAnimate = function(options) {
var $this = $(this),
$parent = $this.parent();
if ($parent.is(':not(.dropdown)')) {
return true;
}
// 存储动画的定时器
var Animate_interval = {
MENU: new Array(),
SUB_INDEX: 0, SUB: new Array()
};
$parent.addClass(Animate_class.THIS)
.on('show.bs.dropdown', function(event) {
event.preventDefault();
$(this)
.not('.' + Animate_class.SHOW)
.removeClass(Animate_class.HIDE)
.addClass(Animate_class.SHOW)
.find('>.dropdown-menu>li').each(function(index, el) {
clearTimeout(Animate_interval.MENU[index]);
Animate_interval.MENU[index] = setTimeout(function() {
$(el)
.removeClass(Animate_class.HIDE_LI)
.addClass(Animate_class.SHOW_LI)
}, index * 50);
});
})
.on('hide.bs.dropdown', function(event) {
event.preventDefault();
var Oli = $(this)
.not('.' + Animate_class.HIDE)
.removeClass(Animate_class.SHOW)
.addClass(Animate_class.HIDE)
.find('>.dropdown-menu>li'),
Oli_length = Oli.length;
for (var i = Oli_length - 1; i >= 0; i--) {
(function(index, el) {
clearTimeout(Animate_interval.MENU[index]);
Animate_interval.MENU[index] = setTimeout(function() {
$(el)
.removeClass(Animate_class.SHOW_LI)
.addClass(Animate_class.HIDE_LI)
}, (Oli_length - i) * 50);
})(i, Oli[i]);
}
})
.find('.dropdown-submenu').each(function(indexSUB, elSUB) {
var $_this = $(elSUB);
Animate_interval.SUB[ indexSUB ] = new Array();
$_this
.on('show.bs.submenu', function(event) {
event.preventDefault();
$_this
.find('>.dropdown-menu>li').each(function(index, el) {
clearTimeout(Animate_interval.SUB[ indexSUB ][index]);
Animate_interval.SUB[ indexSUB ][index] = setTimeout(function() {
$(el)
.removeClass(Animate_class.HIDE_SUB_LI)
.addClass(Animate_class.SHOW_SUB_LI)
}, index * 50);
});
})
.on('hide.bs.submenu', function(event) {
event.preventDefault();
var Oli = $_this.find('>.dropdown-menu>li'),
Oli_length = Oli.length;
for (var i = Oli_length - 1; i >= 0; i--) {
(function(index, SUBindex, el) {
clearTimeout(Animate_interval.SUB[ SUBindex ][index]);
Animate_interval.SUB[ SUBindex ][index] = setTimeout(function() {
$(el)
.removeClass(Animate_class.SHOW_SUB_LI)
.addClass(Animate_class.HIDE_SUB_LI)
}, (Oli_length - i) * 50);
})(i, indexSUB, Oli[i]);
}
})
})
};
$(document).ready(function() {
// 查找文档中属性包含 '[data-animate="dropdown"]' 的元素以应用 dropdownAnimate 方法。
$('[data-animate="dropdown"]').dropdownAnimate();
// 去除一下 bootstarp-hover-dropdown.js 为二级菜单绑定的事件
$('[data-animate="dropdown"] ~ .dropdown-menu .dropdown-submenu')
.off('mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave')
.each(function() {
var $this = $(this);
$this.mouseenter(function() {
$this.addClass('open').triggerHandler('show.bs.submenu');
})
.mouseleave(function() {
$this.removeClass('open').triggerHandler('hide.bs.submenu');
});
});
});
})(jQuery, window)