Geek Answers Handbook

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

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

I added Liquid Fire with the installation of npm -save-dev. I added a transitions.js file with the code outlined in the tutorial. I replaced {{outlet}} {{liquid-outlet}}. And nothing. Nothing happens. There are no errors in the logs or console, and nothing is displayed where the output is. I tried exactly what the textbook says. Did I skip a step to make {{liquid-outlet}} work?

+6
source share
4 answers

I had the same problem. My problem was that I did not use the correct route names.

I have included the parameter ENV.APP.LOG_TRANSITIONS = true; in /config/environment.js . This prints the route names in the console on the transition, which helped me write the correct transitions in /app/transitions.js . Also, be sure to add {{liquid-outlet}} to all your outlets with nested routes.

Here is 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') ); }
+3
source

You can debug your transitions by putting this.debug() as the last argument in transitions that you think should match. For each output that will print to the console, why each transition rule does not match.

See here: http://ef4.imtqy.com/liquid-fire/#/transition-map/debugging-constraints

+1
source

I had the same problem.

I just lost transitions.js in / instead of /app/ . Now everything works!

What you can try:

  • Add an explicit animation to the output {{liquid-outlet use="toLeft"}} . If this works, perhaps this is your app/transition.js file.
  • Add this.debug() to app/transition.js and check if it is registered correctly. If so, do your routes match? See example
  • Be sure to wrap the entire transitions.js file in export default function() { ... };

Using Ember CLI 1.13.13:

0
source

Restart the fading feed. Open the terminal where ember serve works. Type Ctrl + C and wait for the smoldering coal to finish. Re-enter "ember serve" and again open the ember web page ( http: // localhost: 4200 / ). Worked for me. Good luck

0
source

More articles:


All Articles