ember-animation / liquid-fire

Animations & transitions for ambitious Ember applications.
Other
1.15k stars 199 forks source link

Transition not working between routes with four levels #366

Open damianthepichler opened 9 years ago

damianthepichler commented 9 years ago

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:

route-1

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

route-2

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 commented 8 years ago

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

amakh commented 8 years ago

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

nwhittaker commented 8 years ago

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.