Animation-css au-stagger


I have a list of table and I want to animate some tr of some table. The simple animation with au-animate works fine, but I’d like to chain animations. So I’m trying au-stagger. And it doesn’t work.

My markup looks like this:

    repeat.for="group of groups>
      repeat.for="item of group"

And my css:

.au-stagger {
  animation-delay: 500ms;
.list .au-enter-active {
  animation: slideRight .5s ease-in;

So, I’ve tried putting au-stagger in my very first parent element. It doesn’t work but if I read the source code, it seems that the class must be on the closest parent, so I tried putting it on the table. The effect should not be exactly what I want, but this is better than nothing. And it doesn’t work either.

What can I do ?

Well, it was because Chrome added a tbody between my table and my tr. So it works only with direct parent. Should it be possible to make it work with farest parent ?

Hm not sure tbh. I fear that would introduce unwanted sideffects. What if the Body did get the list class and you’d had multiple au-staggers?

Maybe a new class ? au-stagger-deep ?

What if you add the tbody yourself to the HTML and add the class=“au-stagger” there?

That’s what I did. But I’m thinking about use cases where it should be usefull.