Aurelia MDC Web + Aurelia Animation CSS

Help Requests
1

Hello - I’m following the tutorial for getting aurelia animations going with some of my dynamic lists. The lists are being rendered using material design with the Aurelia mdc library: GitHub - aurelia-ui-toolkits/aurelia-mdc-web: Aurelia wrapper for Material Design (Web) Components

I have the animation css working with plain old ul/li list items, but when using it with the mdc stuff nothing happens.

For context, here is what works:

    <ul class="au-stagger">
        <li class="au-animate animate-fade-in animate-fade-out" repeat.for="file of files">${file.name}</li>
    </ul>

and what does not:


    <mdc-list-group>
        <mdc-list two-line avatar class="au-stagger">
        <div class="divider" data-content="Files"></div>
        <mdc-list-item repeat.for="file of files" class="au-animate animate-fade-in animate-fade-out" click.delegate="handleEvent('select', file)" >

            <!-- <img src="https://imagizer.imageshack.com/v2/260x260q90/c/903/q5d7va.jpg" alt="" class="image mt-2"> -->
            <mdc-icon mdc-list-item-graphic>${file.icon}</mdc-icon>

            <mdc-list-item-primary-text>${file.name}</mdc-list-item-primary-text>
            <mdc-list-item-secondary-text>${file.size / 1000000 | round:2 } MB</mdc-list-item-secondary-text>
            <a href="#" click.delegate="handleEvent('remove', file)" mdc-list-item-meta aria-label="View more" title="More info">
                <mdc-icon>delete</mdc-icon>
            </a>
        </mdc-list-item>

        </mdc-list>
      </mdc-list-group>

Just curious if this is by design or if I’m doing something wrong. I know mdc does a lot of the dom operations outside of the aurelia templating so maybe this just isn’t something that’s possible but I’m hoping to get some level of animations working.

Thanks in advance!

2

Never tried with MDC components. Would you mind creating a minimal repro so we can take a look at it?

3

Sure thing - here’s a quick sample showing the difference:

The first list has animations applied correctly, but the second one (rendered by the aurelia mdc) does not. Let me know if you have any thoughts.

4

Most likely animation API does not like the AU1 slot which mdc-list is using