Fade In / Fade out in liquid-fire - ember.js

Question

I have a ember template with 2 sections, where one section is visible by default and other one is hidden until I hit a button.
I am using liquid-fire, most specifically the liquid-if helper to do a simple fade in / fade out of the 2 sections. This works however there is a slide up / slide down that occurs between toggling the 2. As anyone seen this behavior before? I would to prevent this slide effect from happening
Here's sample how template looks like:
{{#liquid-if isPasswordResetLinkConfirmVisible class="lf-fade"}}
<h1 class="text-center">{{t 'reset_password.text.resend_email_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.resend_email_line_1'}}<br/>
{{t 'reset_password.text.resend_email_line_2'}}
<i class="fa fa-envelope-o email-icon"></i>
</p>
{{/liquid-if}}
{{#liquid-if isPasswordResetLinkVisible class="lf-fade"}}
<h1 class="text-center">{{t 'reset_password.text.expired_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.expired_line_1'}}<br/>
{{t 'reset_password.text.expired_line_2'}}
</p>
{{mx-button action=(action "sendNewPasswordResetLink") size="large" label=(t 'action.send_new_link') block=true}}
{{/liquid-if}}
Here's a sample of my transition
this.transition(
this.hasClass('lf-fade'),
this.toValue(true),
this.use('fade', {
duration: 600
})
);

Answer 1

Thanks, I was able to find a solution looking at the code. Seems what Im experience is related to fact my content is different size and doing slide animation to resize you can deactivate that by doing by using the enableGrowth param
{{#liquid-if isPasswordResetConfirmVisible class="lf-fade" enableGrowth=false}}

Answer 2

You want to put the two templates into an if/else like this:
{{#liquid-if isPasswordResetLinkConfirmVisible use="fade"}}
<h1 class="text-center">{{t 'reset_password.text.resend_email_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.resend_email_line_1'}}<br/>
{{t 'reset_password.text.resend_email_line_2'}}
<i class="fa fa-envelope-o email-icon"></i>
</p>
{{/else}}
<h1 class="text-center">{{t 'reset_password.text.expired_header'}}</h1>
<p class="text-center">
{{t 'reset_password.text.expired_line_1'}}<br/>
{{t 'reset_password.text.expired_line_2'}}
</p>
{{mx-button action=(action "sendNewPasswordResetLink") size="large" label=(t 'action.send_new_link') block=true}}
{{/liquid-if}}
Notice too I used use="fade" in the liquid-if which means I don't have to create a transition.
#jpoiri you can read more about the transitions here