淡入/淡入淡出

Question

我有一个有2个部分的余烬模板，其中一个部分默认情况下可见，而另一个则隐藏，直到我按下按钮。

我使用的是液体喷射，最特别的是，如果是液体助燃剂，则可以在2个部分中进行简单的淡入/淡出。 但是，此操作有效。在切换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

谢谢，我能够找到一个查看代码的解决方案。 我的经验似乎与我的内容大小不同有关，我可以通过使用enableGrowth参数将幻灯片动画调整大小来取消激活它

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

Answer 2

您要将两个模板放入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}}

还要注意，我在liquid-if use="fade"过use="fade" ，这意味着我不必创建transition 。

@jpoiri，您可以在此处了解有关转换的更多信息