Bootstrap Dropdown Animate(动画扩展)
2020-06-29 04:43
549 查看
/**
* Project: Bootstrap Animate Dropdown
* Author : 拓荒者<358279128@QQ.COM>
* 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 拓荒者<358279128@QQ.COM>
// $this.children('.dropdown-menu').show();
$this.addClass('open').triggerHandler('show.bs.submenu');
// always close submenu siblings instantly
// 2015-11-04 10:20:05 非标准写法 By 拓荒者<358279128@QQ.COM>
// $this.siblings().children('.dropdown-menu').hide();
$this.siblings('.open').removeClass('open').triggerHandler('hide.bs.submenu');
}, function () {
// 2015-11-04 10:20:05 非标准写法 By 拓荒者<358279128@QQ.COM>
// var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function () {
// 2015-11-04 10:20:05 非标准写法 By 拓荒者<358279128@QQ.COM>
// $submenu.hide();
$this.removeClass('open').triggerHandler('hide.bs.submenu');
}, settings.delay);
});
});
* 缺点
* 再一个就是一级菜单大于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;
}转载于:https://my.oschina.net/CocoFather/blog/525374
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap Dropdown Animate(动画扩展) JS版本
- JS组件Bootstrap dropdown组件扩展hover事件
- 基于Bootstrap和animate.css的模态框动画效果
- Jquery动画（animate）的使用及扩展说明
- 滚动动画animate-scroll扩展
- jquery animate 不支持颜色动画属性扩展
- JS组件Bootstrap dropdown组件扩展hover事件
- jQuery用animate()方法实现简单动画效果
- react-native react-native-modal-dropdown级联扩展
- 扩展Bootstrap Tooltip插件使其可交互的方法
- jquery学习之tab切换及动画效果，涉及animate()，siblings()
- 递归动画UIView animate 无法响应内部点击事件 touch事件
- 动画Animate
- jQuery动画animate方法使用介绍
- jQuery动画效果animate和scrollTop结合使用实例
- 使用VBA扩展VS.NET集成开发环境,有Flash演示动画
- bootstrap treeview 扩展addNode方法动态添加子节点的方法
- JQuery中的方法链及定时函数的使用,animate动画
- JQuery自定义动画——animate()学习
- html5-- JQuery动画Animate