Question

我安装了液火。把它全部搞定。它可以在模板文件夹中的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移动到一个文件夹中时，无论我做什么，页面链接，但没有很好的过渡。

我尝试过以下代码：

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 cakes / test2。但是没有很好的幻灯片转换。

Answer 1

您无法在不同级别路线之间定义特定的过渡动画。

您可以做的是定义test1路线和蛋糕路线之间的过渡，因为它们处于同一水平。

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

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

当你从test1路线转到cakes.test2

时，这将激活动画

灰烬 - 液体火 - transitions.js

1 个答案: