github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

重构 dropdown 动画 (#1411) 

* 重构 dropdown 动画

* 增加 dropdown 子节点动画代码注释

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
pull/1413/head
morning-star 2023-10-28 22:39:55 +08:00 committed by GitHub
parent e1d88a45a7
commit 2d12ad5c27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/modules/dropdown.js
View File

@ -444,31 +444,33 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
// 设置菜单组展开和收缩状态 // 设置菜单组展开和收缩状态
thisModule.spread = function(othis, isAccordion){ thisModule.spread = function(othis, isAccordion){
var contentElem = othis.children('ul');
var needSpread = othis.hasClass(STR_ITEM_UP); var needSpread = othis.hasClass(STR_ITEM_UP);
var ANIM_MS = 200;
var toggle = function (groupElem, isOpen) { // 动画执行完成后的操作
var contentElem = groupElem.children('ul'); var complete = function() {
var contentHeight = contentElem[0].scrollHeight; $(this).css({'display': ''}); // 剔除临时 style，以适配外部样式的状态重置;
};
if(contentElem.is(':animated')) return; // 动画是否正在执行
if (contentElem.is(':animated')) return;
groupElem.removeClass(isOpen ? STR_ITEM_UP : STR_ITEM_DOWN).addClass(isOpen ? STR_ITEM_DOWN : STR_ITEM_UP); // 展开
contentElem.height(isOpen ? 0 : contentHeight) if (needSpread) {
.stop() othis.removeClass(STR_ITEM_UP).addClass(STR_ITEM_DOWN);
.animate({ contentElem.hide().stop().slideDown(ANIM_MS, complete);
opacity: isOpen ? 1 : 0, } else { // 收缩
height: isOpen ? contentHeight : 0 contentElem.stop().slideUp(ANIM_MS, complete);
}, 200, function(){ othis.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP);
contentElem.css({ height: '', opacity: '' })
})
} }
toggle(othis, needSpread); // 手风琴
if (needSpread && isAccordion) {
if (!needSpread || !isAccordion) return; var groupSibs = othis.siblings('.' + STR_ITEM_DOWN);
layui.each(othis.siblings('.' + STR_ITEM_DOWN), function(index, item){ groupSibs.children('ul').stop().slideUp(ANIM_MS, complete);
toggle($(item), false); groupSibs.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP);
}) }
}; };
// 全局事件 // 全局事件