Animation of child elements

[kgish]

For a route's template that is being transitioned to, I would like to be able to apply a given animation to a specific sub-element within that template.

So for example, were I to go to a given page, animation of a given child element would be triggered.

[ef4]

That's what the explode transition does. See http://ember-animation.github.io/liquid-fire/#/transitions/explode

[kgish]

Is that so? What I gathered from the demo is that this transition is triggered once the route has already been entered into, and is triggered by a toggle event that switches between the #liquid-if sections.

What I want to do is during a route transition using {{liquid-outlet}} a child element within the new template.

Or is there something obvious that I am missing?

[ef4]

All the transition animations are independent of what two states you're switching between. You can use them with a liquid-if or with a liquid-outlet.

When using a liquid-outlet, the old state is the old route and the new state is the new route.

[kgish]

I re-read the section about explode and gave it several attempts with {{liquid-outlet}} and , but cannot get things to work properly. Hopefully if I describe the situation in more detail, someone can help me out better.

My main template app/templates/index.hbs is simple:

<div class='well well-lg'>
  ...
</div>

<div class="row">
  {{#each dashboardItems as |item index|}}
    {{dashboard-item item=item index=index}}
  {{/each}}
</div>

Where dashboardItems is an array of objects that look like this:

{
  link: route_string,
  id: 'dashboard-' + unique_name,
  icon: fa-icon,
  text: string
}

The template for app/templates/components/dashboard-item.hbs looks like this:

<div class="col-xs-6 col-md-2 dashboard-item text-center">
  {{#link-to item.link id=item.id class="thumbnail nounderline"}}
    <span class="palette-{{index}}">{{fa-icon item.icon size='5'}}</span><br/>
    {{item.text}}
  {{/link-to}}
</div>

Finally, in app/controllers/index.js I trigger the animation in the init() method like this:

init: function() {
  // Disable animation during testing
  if (config.environment !== 'test') {
    Ember.run.scheduleOnce('afterRender', this, function () {
      Ember.$('.dashboard-item').velocity("transition.flipBounceXIn", {stagger: 50});
    });
  }
}

This isn't very elegant and I was hoping that using liquid-fire would simplify this greatly, thanks in advance.