Search code examples
ember.jshandlebars.jsember-cli

Ember.js - Animate Handlebars Change

I am using an {{if}} statement in a handlebars template (in Ember.js) and currently have it setup so if foo is true, a form is displayed.

I have a button which toggles the value of foo and hides/shows the form. This is done with an {{action}} attribute.

What I would like to do is animate this change. If possible, how can I do this using the current setup?

Note: I would be fine with fadeIn/fadeOut (jQuery).

Solution

  • Take a look at Liquid Fire (see: https://github.com/ef4/liquid-fire). I personally didn't work with it yet, but the examples look promising. Especially this form example looks similar to what you want: http://ef4.github.io/ember-animation-demo/#/animated-if-demo Source is on the next slide: http://ef4.github.io/ember-animation-demo/#/animated-if-source