Ember - 液体火焰 - transitions.js答案

【问题标题】：Ember - liquid fire - transitions.jsEmber - 液体火焰 - transitions.js
【发布时间】：2016-05-26 13:59:19
【问题描述】：

我已经安装了liquid-fire。全部设置好。它适用于模板文件夹中的 2 个文件。

transitions.js

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

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

路由器.js

Router.map(function() {

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

});

应用程序.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')
  );
}

路由器.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 cakes/test2。但是没有很好的幻灯片过渡。

【问题讨论】：

标签： ember.js ember-cli

【解决方案1】：

你不能在不同关卡路由之间定义特定的过渡动画。

您可以做的是定义 test1 路由和 cakes 路由之间的转换，因为它们处于同一级别。

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

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

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

【讨论】：