Fade In/Fade out in liquid-fire

Question

У меня есть шаблон ember с двумя разделами, где по умолчанию отображается один раздел, а другой скрыт, пока я не нажал кнопку.

Я использую жидкий огонь, в частности жидкость, если помощник, чтобы сделать простую затухание/исчезновение из двух секций. Это работает, однако есть слайд вверх/слайд вниз, который происходит между переключением 2. Как кто-либо видел это поведение раньше? Я хотел бы, чтобы предотвратить этот слайд эффект от происходящего

Вот пример, как шаблон выглядит следующим образом:

{{#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}} 

Вот пример моего перехода

this.transition(
    this.hasClass('lf-fade'), 
    this.toValue(true), 
    this.use('fade', { 
     duration: 600 
    }) 
); 

Answer 1

Вы хотите поставить два шаблона в if/else например:

{{#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}} 

Извещение также использую use="fade" в liquid-if, что означает, что мне не нужно создавать transition.

@jpoiri вы можете прочитать больше о переходах here

Answer 2

Спасибо, я был в состоянии найти решение, глядя на код. Кажется, что Im опыт связан с тем, что мое содержанием различного размера и делать слайд-анимацию, чтобы изменить ее можно отключить, что при этом с помощью enableGrowth параметров

{{#liquid-if isPasswordResetConfirmVisible class="lf-fade" enableGrowth=false}}