search

holiber / sl-vue-tree

Customizable draggable tree component for Vue.js
https://holiber.github.io/sl-vue-tree/
MIT License
345 stars 78 forks source link

Expand/Collapse transition #14

Open Piersen opened 6 years ago

Piersen commented 6 years ago

Question: Would it be possible to add transition wrapper to the expand/collapse v-if, so that collapse/expand could be animated?

holiber commented 6 years ago

Hey. I have to replace v-if with v-show to allow transitions. Looks like it's easy to hook up, will do a PR for that

Piersen commented 6 years ago

Thanks a lot. I don't entirely see why v-show is necessary as transitions as described here https://vuejs.org/v2/guide/transitions.html work with v-if too. I just imagined that with a transition wrapper added, the styles of the enter and leave classes could be changed to customize the transition

lazylester commented 6 years ago

v-show appears to be preferred in this scenario (see: the vuejs docs) for performance reasons. I'm debugging significant and problematic performance issues with my sl-vue-tree. I can't (yet) tell if they're related to this library itself, or to vuejs. But according to the docs v-show would be appropriate here.

Having said that, however, I'm still seeing performance issues with v-show, even though it should be much faster (it's just css show/hide).

It's slightly OT for this thread, but the performance issue I'm seeing is >100ms to open a node with 26 children. This becomes problematic when I implement an "open all" icon, and it takes several seconds to open 50 nodes.