<LiquidSpacer />

<LiquidSpacer /> is a component that animates its own width and height to match the width and height of its content. Unlike the other template helpers, it doesn't run arbitrary animations or use transition rules. It just manages smoothly growing and shrinking a container, whenever the stuff inside changes.

Options

growDuration
The maximum amount of time to spend growing. For small changes, we may spend less than this time depending on growPixelsPerSecond. Defaults to 250 milliseconds.
growPixelsPerSecond
The minimum speed in at which we will grow. Defaults to 200 pixels per second. This lets us make small size adjustments in times shorter than a full growDuration.
growEasing
A Velocity easing function to use when growing the container height and width. Defaults to 'slide' .
growWidth, growHeight
Boolean options (defaulting to true ) to control whether to grow horizontally and vertically. Useful for fluid-width or fluid-height content which will grow in height or width.
enabled
Whether to animate height and width changes. Defaults to true .

Demo

This is a long message. This is a long message. This is a long message. This is a long message. This is a long message. This is a long message. This is a long message. This is a long message. 
<div id="liquid-spacer-demo">
  <label>
    <Input @type="checkbox" @checked={{this.showLongMessage}} />
    Show Long Message
  </label>
  <LiquidSpacer @growDuration={{250}}>
    {{#if this.showLongMessage}}
      {{this.longMessage}}
    {{else}}
      {{this.shortMessage}}
    {{/if}}
  </LiquidSpacer>
</div>