there are plenty examples on the net for the use case, if we want to show/hide table rows f. e. with fade in/out or with slide. Most of them uses jQuery and wraps the rows/cells in a div.

In my case I have let’s say 11 rows. The first row is the ‘group’ row with a button in it. All the other 10 rows below it are detail rows. On button click, I add or remove this css classes to/from this 10 rows:

.enhanced.k-grid .collapsed-row {
  display: none;
}

.enhanced.k-grid .expanded-row {
  display: table-row;
}

While this works, but the rows are hiding/showing instantly. The question is, how could I apply some animations to this 10 rows without using extra divs or jQuery? I extend a third party table, so I have limited options.

Thanks.