Ember - liquid fire - transitions.js

Question

I have installed liquid-fire. Set it all up. And it works between 2 files in the templates folder.

transitions.js

export default function(){
  this.transition(
    this.fromRoute('test1'),
    this.toRoute('test2'),

    this.use('toRight'),
    this.reverse('toLeft')
  );
}

router.js

Router.map(function() {

  this.route('test1', function() {});
  this.route('test2', function() {});

});

application.hbs

{{liquid-outlet}}

test1.hbs

<h1>test1</h1>
<br>
{{#link-to 'test2'}} test 2 {{/link-to}}

test2.hbs

<h1>test2</h1>
<br>
{{#link-to 'test1'}} back to test 1 {{/link-to}}

This works fine. I get a nice slide effect between the 2 pages.

But when I move test2 into a folder, no matter what I do, the pages link, but there is no nice transition.

I have tried the below code:

transitions.js

export default function(){
  this.transition(
    this.fromRoute('test1'),
    this.toRoute('cakes.test2'),

    this.use('toRight'),
    this.reverse('toLeft')
  );
}

router.js

Router.map(function() {
  this.route('test1', function() {});


    this.route('cakes', function() {
      this.route('test2', function() {});
    });

});

test1.hbs

<h1>test1</h1>
<br>
{{#link-to 'cakes.test2'}} test 2 {{/link-to}}

test2.hbs

<h1>test2</h1>
<br>
{{#link-to 'test1'}} back to test 1 {{/link-to}}

The pages change, so the link works- and you can visit the url cakes/test2 in the browser also. But there is no nice slide transition.

Answer 1

You can't define specific transition animations between different level routes.

What you can do is define a transition between test1 route and cakes route, since they are on the same level.

  this.transition(
    this.fromRoute('test1'),
    this.toRoute('cakes'),

    this.use('toRight'),
    this.reverse('toLeft')
  );

This would then activate the animation when you go from test1 route to cakes.test2