6

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?

amhasler
  • 67
  • 1
  • 6
  • Did you get anywhere with this? I'm seeing exactly the same thing. I've followed the suggestions below and can see that my transitions match. The content for each route is in the DOM, but I can't see it in the browser. – Andy Pye Sep 03 '15 at 10:59

4 Answers4

3

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')
    );
}
danillouz
  • 6,121
  • 3
  • 17
  • 27
  • I'm having the same problem. I have a single outlet in application.hbs. After prepending "liquid-" nothing renders in the outlet. And app/transitions.js does not appear to be read. Is there something that needs to be set (ie. in app.js) to load the addon? – brian Aug 08 '15 at 22:05
  • @brian kinda hard to tell without seeing any code.. Here's a link to my [repo](https://github.com/danillouz/socialbot-client), maybe you can check it out and see if you're missing anything. Hope this helps. – danillouz Aug 09 '15 at 11:20
1

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

Balint Erdi
  • 1,103
  • 2
  • 12
  • 20
0

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:

Jan Werkhoven
  • 2,656
  • 1
  • 22
  • 31
0

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!

Benisburgers
  • 352
  • 4
  • 17