余烬-液体火- transitions.js

Question

我安装了液体火。把一切都安排好。它在模板文件夹中的两个文件之间工作。

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}}

这个很好用。我在这两页之间得到了很好的幻灯片效果。

但是当我将test2移动到文件夹中时，无论我做什么，页面链接，但是没有很好的转换。

我尝试了以下代码：

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}}

页面会发生变化，因此链接可以正常工作--您也可以在浏览器中访问url蛋糕/test2 2。但是没有很好的幻灯片过渡。

Answer 1

您不能定义不同级别路由之间的特定转换动画。

您可以做的是定义test1路由和蛋糕路由之间的转换，因为它们在相同的级别上。

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

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

这将在您从test1路由到cakes.test2时激活动画。