Transition not working between routes with four levels

[damianthepichler]

I have two routes with a slide-transition between the sub-routes. But only the animation on the first route is working

// First example: This one is working
this.transition(
  this.fromRoute('appInstances.appInstance.index'),
  this.toRoute('appInstances.appInstance.users'),
  this.use('toLeft', { duration: 500, easing: [ 0.35, 0, 0.25, 1 ] }),
  this.reverse('toRight', { duration: 500, easing: [ 0.35, 0, 0.25, 1 ] })
);

// Second example: This one is not working
this.transition(
  this.fromRoute('administration.appInstances.appInstance.index'),
  this.toRoute('administration.appInstances.appInstance.users'),
  this.use('toLeft', { duration: 500, easing: [ 0.35, 0, 0.25, 1 ] }),
  this.reverse('toRight', { duration: 500, easing: [ 0.35, 0, 0.25, 1 ] })
);

The first example is working, but the second one not. If I put on the debug-mode I get this for the first example:

[liquid-fire] Checking transition rules for <div id=​"ember3500" class=​"liquid-tabs ember-view liquid-container liquid-animating velocity-animating">​…​</div>​
[liquid-fire rule 7] rejected because oldRoute was appInstances.appInstance.index
[liquid-fire rule 7 reverse] rejected because oldRoute was appInstances.appInstance.index
[liquid-fire rule 6 reverse] rejected because oldRoute was appInstances.appInstance.index
[liquid-fire rule 7] rejected because newRoute was appInstances.appInstance.users
[liquid-fire rule 7 reverse] rejected because newRoute was appInstances.appInstance.users
[liquid-fire rule 6 reverse] rejected because newRoute was appInstances.appInstance.users
[liquid-fire rule 6] matched

but this one for the second example

[liquid-fire] Checking transition rules for <div id=​"ember2669" class=​"liquid-tabs ember-view liquid-container liquid-animating">​…​</div>​
[liquid-fire rule 9] rejected because oldRoute was app-instances.app-instance.index
[liquid-fire rule 9 reverse] rejected because oldRoute was app-instances.app-instance.index
[liquid-fire rule 10] rejected because oldRoute was app-instances.app-instance.index
[liquid-fire rule 10 reverse] rejected because oldRoute was app-instances.app-instance.index
[liquid-fire rule 9] rejected because newRoute was app-instances.app-instance.users
[liquid-fire rule 9 reverse] rejected because newRoute was app-instances.app-instance.users
[liquid-fire rule 10] rejected because newRoute was app-instances.app-instance.users
[liquid-fire rule 10 reverse] rejected because newRoute was app-instances.app-instance.users

This is the output of the ember-tool for the first example:

and this is the output of the ember-tool for the second example:

So you can see that my route 'administration.appInstances.appInstance.index' gets converted to 'app-instances.app-instance.index', 'administration' is missing and 'appInstance' gets converted from camelCase to kebab-case.

As a workaround i get this code working for my second example:

this.transition(
  this.fromRoute('app-instances.app-instance.index'),
  this.toRoute('app-instances.app-instance.users'),
  this.use('toLeft', { duration: 500, easing: [ 0.35, 0, 0.25, 1 ] }),
  this.reverse('toRight', { duration: 500, easing: [ 0.35, 0, 0.25, 1 ] }),
  this.debug()
);

I assume that it has something to do with the four levels of the route. Is it possible that the plugin does not supports routes with more than four levels?

[amakh]

@damianthepichler I have the same issue here, only the first level is working. Have you found a solution?

[amakh]

Sorry for my question, issue solved at #361, you need an outlet for each child route.

[nwhittaker]

I had a similar-sounding issue that I was able to resolve. My setup included three template files (e.g. "app.hbs", "app/list/index.hbs", and "app/list/detail.hbs"). Transitions between "index.hbs" and "detail.hbs" didn't work until I created a template file at "app/list.hbs" with the contents "{{liquid-outet}}". Interestingly, keeping "{{outlet}}" in "app.hbs" didn't break the transitioning.

There's an allusion that this step is needed in the "Transitions for nested routes" section of the documentation -- but it wasn't clear to me that I couldn't just put "{{liquid-outlet}} in "app.hbs" and have that directly wrap the "index.hbs" and "detail.hbs" templates.