Ember - 液体火 - transitions.js

Question

我安装了liquid-fire。全部设置好。它在模板文件夹中的 2 个文件之间工作。

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 移动到一个文件夹时，无论我做什么，页面 link，但是没有很好的过渡。

我试过下面的代码：

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

页面发生变化，因此 link 有效 - 您也可以在浏览器中访问 url cakes/test2。但是没有很好的幻灯片切换。

Answer 1

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

你可以做的是在 test1 路由和 cakes 路由之间定义一个转换，因为它们在同一层。

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

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

当您从 test1 路线转到 cakes.test2 时，这将激活动画

Ember - 液体火 - transitions.js

Ember - liquid fire - transitions.js

ember.js

ember-cli