Question

我最近按照本教程中的步骤大纲将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}}工作的步骤吗？

Answer 1

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

我在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')
    );
}

Answer 2

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

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

Answer 3

我遇到了同样的问题。

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

您可以尝试的事情：

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

使用Ember CLI 1.13.13 ：

Answer 4

重新启动“余餐”。打开运行“ ember serve”的终端。键入Ctrl + C并等待余烬结束。再次输入“ ember serve”，然后重新打开余烬网页（http://localhost:4200/）。为我工作。祝你好运！

将液体火灾添加到Ember CLI项目，{{liquid-outlet}}什么都不做

4 个答案: