动画过程boder-bottom消失

来源：5-8 Collapse 组件总结

vital_zh

2023-08-16

老师，Collapse组件在展开开始，boder-bottom就消失了，在动画完成之后active的boder-bottom才会出现，中间的动画时间是没有border-bottom的。收起的开始，border-bottom也会突然消失，中间过程没有border-bottom，这个现象正常吗。

写回答

4回答

78264609

2024-11-05

因为后面用wrapper包裹了content，但是content的高度一直没变，而是通过调整wrapper的高度配合overflow还实现下拉效果的，所以过程中content的border-bottom一直是被遮挡的，所以这里需要给wrapper的border-bottom设置一下:

.dk-collapse-item__wrapper{

border-bottom: 1px solid var(--dk-collapse-border-color);

}
然后再删除content中的border-bottom，效果更好

慕工程2575929

2023-12-04

.vk-collapse-item__header {
  transition: border-bottom-color 1s ease-in-out;
}

加上这个看着自然了点

自学成菜_

2023-08-31

transition: border-bottom-color var(--vk-transition-duration) ease-in-out;

--vk-transition-duration 这个变量好像没定义，得自己定义

张轩

2023-08-17

同学你好可以否提供一下你的代码库（git），我看一下，我好像没有遇到这个现象呢

张轩

vital_zh

同学你好确实可以复现，这个等我有空再调查一下，看看是代码的原因还是其他什么别的原因

2023-08-18

共2条回复

进阶必学，打造媲美ElementPlus的组件库

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

481 学习 · 218 问题

相似问题

回答 2

回答 1

回答 1

回答 1

回答 1