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