Animation-css au-stagger

Help Requests
1

Hi,

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:

<div
  class="list">
  <table
    repeat.for="group of groups>
    <tr
      repeat.for="item of group"
      class="au-animate">
      <td>…</td>
    </tr>
  </table>
</div>

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 ?

2

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 ?

3

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?

4

Maybe a new class ? au-stagger-deep ?

5

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

6

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