已将Liquid Fire添加到Ember CLI项目，{{liquid-outlet}}不执行任何操作

Question

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

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

Answer 1

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

我在/config/environment.js中启用了ENV.APP.LOG_TRANSITIONS = true;选项。这将在转换时在控制台中打印路由名称，这有助于我在/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/。现在一切都正常了！

你可以尝试的东西：

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

中

使用Ember CLI 1.13.13