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 (https://github.com/george-ayris/aurelia-animation-test/blob/not-working/src/app.html) I don’t see any animation at all and in this scenario (https://github.com/george-ayris/aurelia-animation-test/blob/master/src/app.html) 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 https://github.com/aurelia/templating/blob/release/src/view-slot.js#L49. 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 https://github.com/aurelia/animator-css/issues/46
1 Like