6

最近、このチュートリアルの手順の概要に従って、Ember CLI 0.2.3 プロジェクトに Liquid Fire を追加しました: http://www.programwitherik.com/doing-animations-and-transitions-with-liquid-fire-and-ember/

npm install --save-dev Liquid-fire で Liquid Fire を追加しました。チュートリアルで説明したコードを含む transitions.js ファイルを追加しました。{{outlet}} を {{liquid-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です。今、すべての作品！//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 に答える