focus custom attribute interferes with aurelia-animator-css

[Jaans]

I think if have found some sort of bug where adding the focus custom attribute causes the Aurelia animation for either the parent or child router view to go all weird on me.

Context:

I'm using a router with a child router and using the aurelia-animator-css plugin.

The parent router is a left-side bar sub-nav with the child router filling the main content. I use the au-animate class on the section of each view template (along with swap-order="after") on the router-view custom element. This works nicely to transition the new view from navigation onto the screen.

I have now added the focus custom attribute (after I discovered it's been added to the templating-resources some time back) to an input element for some of the views. This breaks the animation somehow - now it's no longer sliding in from off-screen on the right, but some how the view from the parent router is disappearing for a while and the slide goes too far left (off-screen partially) and when the easing finishes, it all just jumps back into position. I have confirmed that this goes away when I remove the focus attribute from the view.

Demo:

Here's a mini video clip showing what I mean. OneDrive-Aurelia-Focus-breaks-animation

I have no idea where to even begin to look for the root cause?

[jdanyow]

cc @zewa666

[EisenbergEffect]

@zewa666 Ping.