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

Question

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?

Answer 1

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

Answer 2

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