这是一款使用CSS3和JS制作的响应式垂直手风琴特效。该垂直手风琴特效在展开手风琴项时,标题的图标和相应的列表内容使用CSS3 animation来制作动画特效。
使用方法
HTML结构
该垂直手风琴列表的HTML结构如下。
<div class="container"> <div class="accordion"> <dl> <dt> <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">标题1</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> <p>...</p> </dd> <dt> <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">标题2</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true"> <p>...</p> </dd> <dt> <a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger">标题3</a> </dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true"> <p>...</p> </dd> </dl> </div> </div>
CSS样式
该手风琴特效主要执行两个animation动画:animateIn
和animateOut
,分别用于手风琴项的展开和收缩时的动画效果。
.animateIn { -webkit-animation: accordionIn 0.45s normal ease-in-out both 1; animation: accordionIn 0.45s normal ease-in-out both 1; } .animateOut { -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1; animation: accordionOut 0.45s alternate ease-in-out both 1; } @-webkit-keyframes accordionIn { 0% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes accordionIn { 0% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes accordionOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); } } @keyframes accordionOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9) rotateX(-60deg); transform: scale(0.9) rotateX(-60deg); } }
JavaScript
该手风琴特效使用JavaScript来监听手风琴项的鼠标点击或移动触摸事件,并执行相应的操作。
(function(){ var d = document, accordionToggles = d.querySelectorAll('.js-accordionTrigger'), setAria, setAccordionAria, switchAccordion, touchSupported = ('ontouchstart' in window), pointerSupported = ('pointerdown' in window); skipClickDelay = function(e){ e.preventDefault(); e.target.click(); } setAriaAttr = function(el, ariaType, newProperty){ el.setAttribute(ariaType, newProperty); }; setAccordionAria = function(el1, el2, expanded){ switch(expanded) { case "true": setAriaAttr(el1, 'aria-expanded', 'true'); setAriaAttr(el2, 'aria-hidden', 'false'); break; case "false": setAriaAttr(el1, 'aria-expanded', 'false'); setAriaAttr(el2, 'aria-hidden', 'true'); break; default: break; } }; //function switchAccordion = function(e) { console.log("triggered"); e.preventDefault(); var thisAnswer = e.target.parentNode.nextElementSibling; var thisQuestion = e.target; if(thisAnswer.classList.contains('is-collapsed')) { setAccordionAria(thisQuestion, thisAnswer, 'true'); } else { setAccordionAria(thisQuestion, thisAnswer, 'false'); } thisQuestion.classList.toggle('is-collapsed'); thisQuestion.classList.toggle('is-expanded'); thisAnswer.classList.toggle('is-collapsed'); thisAnswer.classList.toggle('is-expanded'); thisAnswer.classList.toggle('animateIn'); }; for (var i=0,len=accordionToggles.length; i<len; i++) { if(touchSupported) { accordionToggles[i].addEventListener('touchstart', skipClickDelay, false); } if(pointerSupported){ accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false); } accordionToggles[i].addEventListener('click', switchAccordion, false); } })();
完整的CSS代码请参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!