search

keno-lee / vue-virt-list

【持续更新中】⚡️ 一个支持vue2&vue3的高性能虚拟(滚动)列表组件 👉🏻 轻量5KB 百万数据渲染 满帧率滚动 丰富场景支持 📑 [vue虚拟列表] [vue虚拟滚动列表][vue虚拟树] [vue-virtual-list] [vue-virtual-scroll-list] [vue-virtual-scroller] [vue-virt-tree]
https://keno-lee.github.io/vue-virt-list/
MIT License
294 stars 39 forks source link

[HELP] 如何实现折叠、展开动画 #30

Closed Stardusten closed 5 months ago

Stardusten commented 6 months ago

我在使用这个库实现虚拟树，但是发现树的折叠展开动画不好实现。想请教一下大佬有什么思路吗？

keno-lee commented 5 months ago

我在使用这个库实现虚拟树，但是发现树的折叠展开动画不好实现。想请教一下大佬有什么思路吗？

这个有的，只是demo中没有写。我在另外一个项目中使用了。（空的时候我再补上简单demo，未来会考虑做一套生态的组件）。 https://keno-lee.github.io/kita-grid/examples/tree/ 基本原理就是修改list的内容。比如展开所有是[1,1-1,2]，折叠后，将数据修改为[1,2]。然后样式上需要自己写。

Stardusten commented 5 months ago

我困惑的主要是动画如何实现. 基于虚拟列表实现的虚拟树把 dom 拍平了, 使得折叠展开动画变得很难做, 因为我不知道如何把一个节点的所有子节点看成一个整体应用动画效果.

keno-lee commented 5 months ago

我困惑的主要是动画如何实现. 基于虚拟列表实现的虚拟树把 dom 拍平了, 使得折叠展开动画变得很难做, 因为我不知道如何把一个节点的所有子节点看成一个整体应用动画效果.

你指的应该是手风琴效果吧。如果是已经显示的父级点击折叠展开效果还是能做的。但是如果是看不见的父级（例如一件折叠展开所有），应该不好做，有些节点是从无到有。这个要求有点难，当然目前只是理论上。可以后面试验一下。如果你有好的实现效果，也欢迎提个pr

Stardusten commented 5 months ago

好的, 谢谢解释, 这个 issue 我就先关了.