Applying classes based on transition direction

[buschtoens]

Currently the two (or more) .liquid-child elements / versions of a .liquid-container that is currently transitioning are indistinguishable.

It would be pretty neat, if liquid-fire could apply classes to the .liquid-child elements, based on the transition direction.

I would suggest .liquid-old for all elements that are on their way to be transitioned out, and .liquid-new for the element that is transitioning in.

Primarily, I would like this to target the correct <input> field for auto focus.

this.$('.liquid-child.liquid-new input').eq(0).select();

Would this feature be appreciated? If not, is there an alternative or better approach?

[buschtoens]

Looking at liquid-versions.js (L 50) it seems that the newest version is always prepended to the versions array and therefore always the first child.

Is that assumption correct?

This should work then:

this.$('.liquid-child:first-child input').eq(0).select();

[ef4]

For focus, you'd really want to wait until you're sure the new element is on screen and not hidden. And the best way to do that is to set focus from without the transition itself. From inside the transition, you don't need to use jQuery selectors to distinguish between the old and new children, they are available as this.oldElement and this.newElement.