block 和 none 问题

一些 CSS 属性可以是动画的    
    
    ，也就是说     


     


     


，当它的值改变时




 




 




，它可以以平滑的方式改变    
    
    。

做折叠面板最简单的方式是改变它的 block 或 none
   

   

   ，这两个属性值不包含在可动画属性中     


     


     


。详见：CSS animated properties




 




 




。所以     

     

     

，设置 CSS 动画（keyframes）或 transition 都是没有效果的
   

   

   。

JS 辅助实现

这个时候就需要借助 JS 来实现折叠面板     

     

     

。首先 




  




  




，获取折叠面板内容的高度

  


  


  ，有了高度按照一定周期来逐步增加高度     
     
     
，或逐步减少高度 




  




  




。

<div class="l-expandable"> <div class="l-expandable__title"> <div @click="isToggled = !isToggled"> <div> <slot name="icon" /> </div> {{ text }} </div> <div @click="toggle"> <i-ep-arrow-down /> </div> </div> <div @click="toggle" :class="{ arrow-up: !isToggled, arrow-down: isToggled }"> <div class="arrow"> <i-ep-arrow-down /> </div> </div> </div>

setup

通过一个变量 isToggled 来判断是否折叠过面板

  


  


  。content 是获取面板内容的模板引用  




   




   




，height 是高度


 



 



 ，对模板引用的高度进行设置     
     
     
。

// setup const isToggled = ref(true); const content = ref(); const height = ref(); // 把每一个折叠面板的高度都分成 10 份来间接性执行               ，执行完最后一帧之后设置 0   




    




    




，即不显示内容 function toggleClose() { let counter = 9; let cHeight = height.value; const interval = setInterval(() => { cHeight -= height.value / 10; content.value.style.height = `${cHeight.value}px`; counter--; if (counter == 0) { content.value.style.height = `${0}px`; // 已经折叠了面板 isToggled.value = false; clearInterval(interval); } }, 10); } function toggleOpen() { let counter = 9; let cHeight = 0; const interval = setInterval(() => { cHeight += height.value / 10; content.value.style.height = `${cHeight}px`; counter--; if (counter == 0) { content.value.style.height = `${height.value}px`; // 已经打开了面板 isToggled.value = true; clearInterval(interval); } }, 10); } function toggle() { if (isToggled.value) { toggleClose(); } else { toggleOpen(); } } // 组件内容渲染完成之后













，获取模板引用对象               ，计算高度    



     



     



，并插入到 CSS 样式中 onMounted(() => { height.value = $(content.value).height(); content.value.style.height = `${height.value}px`; });

CSS 动画

.l-expandable__title { border-left: 4px solid var(--el-color-primary); } .arrow { transform: scale(0, 0); } .l-expandable__title:hover .arrow { transform: scale(1, 1); } .arrow-up { animation: arrow-up-animation 0.3s ease-in; transform: rotate(180deg); } .arrow-down { animation: arrow-down-animation 0.3s ease-in; transform: rotate(0deg); } @keyframes arrow-up-animation { @for $index from 0 to 10 { #{$index * 10%} { transform: rotate($index * 18deg); } } } @keyframes arrow-down-animation { @for $index from 0 to 10 { #{$index * 10%} { transform: rotate(180deg - $index * 18deg); } } } .l-expandable__content { overflow: hidden; transition: var(--l-transition); }

实现效果