Aurelia Animator CSS Library

Hi there, I’m trying to get the aurelia-animator-css plugin to work and seeing some behaviour I don’t understand. I’m unsure whether I’m using the plugin wrong or expecting it do things it cannot. The sandbox from the docs suggests I should be animate any element when the template is being rendered.

I’ve created a fresh aurelia project from the CLI and installed the plugin and slightly modified the app.html template. In this scenario ( I don’t see any animation at all and in this scenario ( only the first h1 animates.

I’m consistently seeing only the first, top level element be able to be animated by applying the correct classes.

Any help would be much appreciated.

1 Like

After doing some digging, it appears that the animator is only getting the callbacks for first child element in the template and therefore this is a design decision with the aurelia templating code. Can anyone confirm this?

And, if so, is there a way to animate arbitrary elements that integrates well with aurelia? Or is the easiest to use something within the attached() lifecycle method of the component?

1 Like

Where did you get that from?
In this example Animation - CodeSandbox each todo item (nested way deep inside) animates as it is created / deleted.

1 Like

I added some tracing to the plugin in my node_modules and, for the templates linked in the original post, that only the first child of the template was receiving a callback into the aurelia-animator-css plugin.

Also, this is a bit of a stretch as I’ve not followed the code, but this comment potentially suggests something similar However, I don’t know how ViewSlot relates to a template, slot or custom element.

I’m also unsure if it’s related to this (quite old) issue

1 Like