How does matching work?

[samselikoff]

I have this template:

{{#animated-if isShowing use=transition}}
  <div class="bg-blue w-32 h-32"></div>
{{else}}
  <div class="bg-blue w-64 h-64 ml-auto"></div>
{{/animated-if}}

The second div is bigger (has more padding) and has margin-left: auto. I'm getting what seems to be some inconsistent results between the Sprites in the various categories. For example, if I interrupt, the same Sprite will show up in two categories.

Is there a better way to hint to EA how to match these things? Something like a key for these two divs? How in general does matching work? (So far its been mostly something I haven't had to worry about.)

[ef4]

All the animator components are really just thin wrappers around animated-each. And animated-each takes a key argument just like regular ember each, and for the same reason: to determine which values are stable.

In the case of animated-if, the value is constrained to just true or false, so all true things will match up with each other and all false things will match up with each other.