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!