动画过程boder-bottom消失

Question

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

Answer 1

78264609 2024-11-05 09:33:27

因为后面用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，效果更好

Answer 2

慕工程2575929 2023-12-04 14:56:20

1 2 3

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

加上这个看着自然了点

Answer 3

自学成菜_ 2023-08-31 12:01:47

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

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

Answer 4

张轩 2023-08-17 09:59:56

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

• 提问者 vital_zh #1

  http://element.vikingship.xyz/components/collapse.html
  这个网站也会有这个问题，将--vk-transition-duration 设置长一些比如3s，效果会明显

• 张轩 回复 提问者 vital_zh #2

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