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

feat(collapse): 新增折叠面板展开和收缩时的过渡动画

pull/2722/head
贤心 2025-06-16 09:31:31 +08:00
parent ac8d5ccc30
commit 9023ae9e6f
2 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/layui.css
View File

@ -577,7 +577,8 @@ a cite{font-style: normal;}
.layui-colla-item:first-child{border-top: none;} .layui-colla-item:first-child{border-top: none;}
.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden;} .layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden;}
.layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;} .layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;}
.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;} .layui-colla-icon{position: absolute; left: 15px; top: 50%; margin-top: -7px; font-size: 14px; line-height: normal; transition: all .2s;}
.layui-collapse-item-expand > .layui-colla-title .layui-colla-icon{transform: rotate(90deg);}
/* 卡片面板 */ /* 卡片面板 */
.layui-card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);} .layui-card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}

65
src/modules/element.js
View File

@ -14,6 +14,9 @@ layui.define('jquery', function(exports) {
var THIS = 'layui-this'; var THIS = 'layui-this';
var SHOW = 'layui-show'; var SHOW = 'layui-show';
var TITLE = '.layui-tab-title'; var TITLE = '.layui-tab-title';
var CONST = {
CLASS_COLLAPSE_EXTEND: 'layui-collapse-item-expand'
};
var Element = function(){ var Element = function(){
this.config = {}; this.config = {};
@ -404,28 +407,36 @@ layui.define('jquery', function(exports) {
} }
// 折叠面板 // 折叠面板
,collapse: function(){ ,collapse: function() {
var othis = $(this); var othis = $(this);
var icon = othis.find('.layui-colla-icon'); var wrapper = othis.closest('.layui-collapse');
var elemCont = othis.siblings('.layui-colla-content'); var filter = wrapper.attr('lay-filter');
var parents = othis.parents('.layui-collapse').eq(0);
var filter = parents.attr('lay-filter'); var ANIM_MS = 200; // 动画过渡毫秒数
var isNone = elemCont.css('display') === 'none'; var CLASS_ITEM = '.layui-colla-item';
var CLASS_CONTENT = '.layui-colla-content';
var thisItemElem = othis.parent(CLASS_ITEM);
var thisContentElem = othis.siblings(CLASS_CONTENT);
var isNone = thisContentElem.css('display') === 'none';
// 是否手风琴 // 是否手风琴
if(typeof parents.attr('lay-accordion') === 'string'){ if (typeof wrapper.attr('lay-accordion') === 'string') {
var show = parents.children('.layui-colla-item').children('.'+SHOW); var itemElems = wrapper.children(CLASS_ITEM);
show.siblings('.layui-colla-title').children('.layui-colla-icon').html(''); itemElems.removeClass(CONST.CLASS_COLLAPSE_EXTEND);
show.removeClass(SHOW); itemElems.children(CLASS_CONTENT).slideUp(ANIM_MS, function() {
$(this).removeClass(SHOW);
});
} }
elemCont[isNone ? 'addClass' : 'removeClass'](SHOW); // 展开或收缩
icon.html(isNone ? '' : ''); thisItemElem[isNone ? 'addClass' : 'removeClass'](CONST.CLASS_COLLAPSE_EXTEND);
thisContentElem[isNone ? 'slideDown' : 'slideUp'](ANIM_MS);
layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', { layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
title: othis title: othis,
,content: elemCont content: thisContentElem,
,show: isNone show: isNone
}); });
} }
}; };
@ -617,27 +628,27 @@ layui.define('jquery', function(exports) {
}); });
} }
//折叠面板 // 折叠面板
,collapse: function(elem){ ,collapse: function(elem) {
var ELEM = 'layui-collapse'; var ELEM = 'layui-collapse';
var targetElem = elem || $('.' + ELEM + elemFilter); var targetElem = elem || $('.' + ELEM + elemFilter);
targetElem.each(function(){ targetElem.each(function() {
var elemItem = $(this).find('.layui-colla-item') var elemItem = $(this).find('.layui-colla-item');
elemItem.each(function(){ elemItem.each(function() {
var othis = $(this) var othis = $(this)
,elemTitle = othis.find('.layui-colla-title') var elemTitle = othis.find('.layui-colla-title');
,elemCont = othis.find('.layui-colla-content') var elemCont = othis.find('.layui-colla-content');
,isNone = elemCont.css('display') === 'none'; var isNone = elemCont.css('display') === 'none';
//初始状态 // 初始状态
elemTitle.find('.layui-colla-icon').remove(); elemTitle.find('.layui-colla-icon').remove();
elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '&#xe602;' : '&#xe61a;') +'</i>'); elemTitle.append('<i class="layui-icon layui-icon-right layui-colla-icon"></i>');
othis[isNone ? 'removeClass' : 'addClass'](CONST.CLASS_COLLAPSE_EXTEND);
//点击标题 // 点击标题
elemTitle.off('click', call.collapse).on('click', call.collapse); elemTitle.off('click', call.collapse).on('click', call.collapse);
}); });
}); });
} }
}; };