6

我最近按照本教程中的步骤概述将 Liquid Fire 添加到我的 Ember CLI 0.2.3 项目中：http: //www.programwitherik.com/doing-animations-and-transitions-with-liquid-fire-and-ember/

我使用 npm install --save-dev liquid-fire 添加了 Liquid Fire。我添加了一个包含教程中概述的代码的 transitions.js 文件。我用 {{liquid-outlet}} 替换了 {{outlet}}。没事了。什么都没有发生。日志或控制台中没有错误，插座所在的位置也没有显示任何内容。我已经完全按照教程所说的进行了尝试。我错过了使 {{liquid-outlet}} 工作的步骤吗？

4

4 回答 4

3

我遇到过同样的问题。我的问题是我没有使用正确的路线名称。

我启用ENV.APP.LOG_TRANSITIONS = true;了/config/environment.js. 这会在转换时在控制台中打印路线名称，这有助于我在/app/transitions.js. {{liquid-outlet}}嵌套路线时，还要确保添加到所有网点。

这是我的transitions.js文件：

export default function(){
    this.transition(
        this.fromRoute('dashboard'),
        this.toRoute('bots'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('bots.bot'),
        this.toRoute('bots.create'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('bots.bot'),
        this.toRoute('bots.index'),
        this.use('toRight'),
        this.reverse('toLeft')
    );

    this.transition(
        this.fromRoute('bots.bot.index'),
        this.toRoute('bots.bot.edit'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('bots.bot'),
        this.toRoute('bots.bot.edit'),
        this.use('toDown'),
        this.reverse('toUp')
    );
}
于 2015-05-12T19:02:44.957 回答
1

this.debug()您可以通过将作为最终参数放置在您认为应该匹配的转换中来调试转换。对于每个出口，这将打印到控制台为什么每个转换规则不匹配。

见这里：http ://ef4.github.io/liquid-fire/#/transition-map/debugging-constraints

于 2015-04-12T20:10:15.390 回答
0

我遇到过同样的问题。

我只是放错transitions.js了 in/而不是 within /app/。现在一切正常！

你可以尝试的事情：

  • 向出口添加显式动画{{liquid-outlet use="toLeft"}}。如果可行，那可能是您的app/transition.js文件。
  • 添加this.debug()并app/transition.js查看它是否正确记录。如果是，那么您的路线是否匹配？查看示例
  • 确保将整个transitions.js文件包装在export default function() { ... };

使用 Ember CLI 1.13.13：

于 2015-12-13T09:53:07.413 回答
0

重新启动“余烬服务”。打开运行“ember serve”的终端。键入 Ctrl+C 并等待 ember 完成。再次输入“ember serve”并重新打开您的 ember 网页 ( http://localhost:4200/ )。为我工作。祝你好运！

于 2019-05-08T16:14:39.430 回答