CODEWITHSUNDEEP
ember-cliember-cli-addons
amhasler
amhasler

Reputation: 67

Added Liquid Fire to Ember CLI project, {{liquid-outlet}} does nothing

I recently added Liquid Fire to my Ember CLI 0.2.3 project by following this steps outline in this tutorial: http://www.programwitherik.com/doing-animations-and-transitions-with-liquid-fire-and-ember/

I added Liquid Fire with npm install --save-dev liquid-fire. I added a transitions.js file with the code outlined in the tutorial. I replaced {{outlet}} with {{liquid-outlet}}. And...nothing. Nothing is happening. No errors in the logs or console, and nothing is displayed where the outlet is. I've tried exactly what the tutorial says. Am I missing a step to make {{liquid-outlet}} work?

Upvotes: 6

Views: 1473

Answers (4)

Benisburgers
Benisburgers

Reputation: 352

Restart 'ember serve'. Open your terminal where 'ember serve' is running. Type Ctrl+C and wait for ember to finish. Type 'ember serve' again and reopen your ember webpage (http://localhost:4200/). Worked for me. Good luck!

Upvotes: 0

Jan Werkhoven
Jan Werkhoven

Reputation: 2953

I had the same issue.

I simply misplaced transitions.js in / instead of within /app/. Now all works!

Things you can try:

  • Add an explicit animation to the outlet {{liquid-outlet use="toLeft"}}. If that works it's probably your app/transition.js file.
  • Add this.debug() to app/transition.js and see if it logs correctly. If yes then do your routes match up? See example
  • Make sure to wrap the entire transitions.js file in export default function() { ... };

Using Ember CLI 1.13.13:

Upvotes: 0

danillouz
danillouz

Reputation: 6371

I had the same issue. My problem was that I wasn't using the correct route names.

I enabled the ENV.APP.LOG_TRANSITIONS = true; option in /config/environment.js. This prints the route names in your console when transitioning, which helped me write the correct transitions in /app/transitions.js. Also make sure to add {{liquid-outlet}} to ALL of your outlets when nesting routes.

Heres my transitions.js file:

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

Upvotes: 3

Balint Erdi
Balint Erdi

Reputation: 1143

You can debug your transitions by placing this.debug() as the final argument in the transitions that you think should match. For each outlet, that will print to the console why each transition rule did not match.

See here: http://ef4.github.io/liquid-fire/#/transition-map/debugging-constraints

Upvotes: 1

Related Questions