几天没有更新博客了,最近有点忙,没时间写博客,今天偷下懒,写写博客。
废话也不多说,说正题,这个折叠面板组件的实现使用了transition过渡动画和css3的变量,使用原生的JS实现逻辑,用到部分ES6的语法,现在本人也还没搞得太透彻,理解明白了,会写一些关于ES7及其更新的语法的博客。
这是效果图:
这个控件比较简单,我就直接上代码了,不明白的朋友可以在评论里留言,我会改进的;或者是有大神指点我一二,让我进步我也很高兴。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collapse 折叠面板</title>
<style>
.callapce{
padding:20px;
border:1px solid #ebeef5;
border-radius:4px;
--down-lh:48px;
--img-down:12px;
}
.collapse-item{
background-color: #fff;
border-bottom: 1px solid #ebeef5;
color: #303133;
font-size: 13px;
text-align: justify;
}
.collapse-item:first-child{
border-top: 1px solid #ebeef5;
}
.item-hd{
position:relative;
height: var(--down-lh);
line-height: var(--down-lh);
cursor: pointer;
}
.item-hd .title{
display:inline-block;
}
.item-hd .collapse-down{
float: right;
display:inline-block;
margin-right: 8px;
}
.item-hd .downImg{
width:var(--img-down);
height:var(--img-down);
vertical-align: middle;
transform:rotate(-90deg);
transition: all .3s linear;
}
.item-hd .downImg.rotate{
transform: rotate(0);
}
.item-mn{
overflow:hidden;
max-height: 0;
box-sizing: border-box;
font-size: 13px;
color: #303133;
transition:all .3s ease-out;
}
.show{
/* 这里max-height设置一个足够大的数,但不能太大 */
transition-timing-function: ease-in;
max-height:100px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class='callapce'>
<div class='collapse-item'>
<div class='item-hd' data-flag='0'>
<div class='title'>一致性 Consistency</div>
<div class='collapse-down'>
<img src='down.png' class='downImg'>
</div>
</div>
<div class='item-mn'>
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
</div>
</div>
<div class='collapse-item'>
<div class='item-hd' data-flag='1'>
<div class='title'>反馈 Feedback</div>
<div class='collapse-down'>
<img src='down.png' class='downImg'>
</div>
</div>
<div class='item-mn'>
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
</div>
</div>
<div class='collapse-item'>
<div class='item-hd' data-flag='2'>
<div class='title'>效率 Efficiency</div>
<div class='collapse-down'>
<img src='down.png' class='downImg'>
</div>
</div>
<div class='item-mn'>
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
</div>
</div>
<div class='collapse-item'>
<div class='item-hd' data-flag='3'>
<div class='title'>可控 Controllability</div>
<div class='collapse-down'>
<img src='down.png' class='downImg'>
</div>
</div>
<div class='item-mn'>
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
</div>
</div>
</div>
<script>
let addEvent = document.addEventListener ?
(elem,type,listener,useCapture)=>{
elem.addEventListener(type,listener,useCapture);
} :
(elem,type,listener,useCapture)=>{
elem.attachEvent('on'+type,listener);
};
let addClass = (node,className)=>{
let current = node.className||'';
if((' '+current+' ').indexOf(' '+className+' ')===-1){
node.className = current?(current+' '+className):className;
}
}
let delClass = (node,className)=>{
let current = node.className||'';
node.className = (' '+current+' ').replace(' '+className+' ',' ').trim();
}
let $ = selector=>{
return [].slice.call(document.querySelectorAll(selector));
};
let oItemHds = $('.item-hd');
let oItemMns = $('.item-mn');
let oDownImgs = $('.downImg');
for(let oItemHd of oItemHds){
addEvent(oItemHd,'click',(ev)=>{
let flag = ev.currentTarget.dataset.flag;
if(flag){
// console.log('flag:',flag);
let oItemMn = oItemMns[flag];
let oDownImg = oDownImgs[flag];
let current = oItemMn.className||'';
let className = 'show';
if((' '+current+' ').indexOf(' '+className+' ')===-1){
addClass(oItemMn,className);
addClass(oDownImg,'rotate');
}else{
delClass(oItemMn,className);
delClass(oDownImg,'rotate');
}
}
})
}
</script>
</body>
</html>
如果您有更好的建议欢迎给我评论留言,谢谢!