search

constantin-p / cp-react-tree-table

A fast, efficient tree table component for ReactJS.
https://constantin.software/cp-react-tree-table
MIT License
94 stars 27 forks source link

Animate toggleChildren? #29

Closed nicknikolov closed 4 years ago

nicknikolov commented 4 years ago

What would be the best strategy to do this in your view? Thanks!

constantin-p commented 4 years ago

Hi @nicknikolov,

You can animate the toggle (or anything in the parent node cells) just by using CSS, but unfortunately, there's currently no out-of-the-box support for animating row insertion/deletion corresponding to expanding/collapsing nodes.

animated-toggle

JSFiddle Demo, relevant lines:

.cp_tree-table .cp_tree-table_cell .toggle-button:not(:disabled)::after {
  /* ... */
  transform: translateY(-50%) rotate(0);
  /* ... */
  transition: transform 0.15s ease;
}

.cp_tree-table .cp_tree-table_cell .toggle-button.expanded:not(:disabled)::after {
  transform: translateY(-50%) rotate(90deg);
}
nicknikolov commented 4 years ago

Thanks!