{{#liquid-if}}

{{#liquid-if}} is a replacement for Ember's normal {{#if}} , except it:

  • respects the transition map so you can animate changes between its true and false states.
  • wraps its content in markup to facilitate animation. See the Common Behavior and Options that apply to all liquid-fire helpers.

<LiquidUnless> </LiquidUnless> is the complement to {{#liquid-if}} .

Demo

Here's a bit of a silly example that shows off the flexibility of the transition rules. 

<div id="liquid-box-demo">
  <label>
    I'm renting a
  </label>
  <SimpleSelect @value={{this.vehicle}} @choices={{this.vehicles}} @onChange={{this.onVehicleChange}} />

  {{#liquid-if predicate=this.isBike class="vehicles"}}
    <label>
      Would you like a helmet?
      <Input @type="checkbox" @checked="helmet" />
    </label>
  {{else}}
    <label>
      License Number
    </label>
    {{! template-lint-disable require-input-label }}
    <Input @type="text" @value={{this.license}} />
    <label>
      License State
    </label>
    <SimpleSelect @value={{this.state}} @choices={{this.states}} @onChange={{this.onStateChange}} />
  {{/liquid-if}}

  <button type="button" class="btn btn-light">
    Yay, let's go!
  </button>
</div>
this.transition(
  this.hasClass('vehicles'),

  // this makes our rule apply when the liquid-if transitions to the
  // true state.
  this.toValue(true),
  this.use('crossFade', { duration }),

  // which means we can also apply a reverse rule for transitions to
  // the false state.
  this.reverse('toLeft', { duration }),
);