Question

我有一个模板的视图，它有两个部分，一个表单，然后一个感谢信息。我希望在提交表单时淡化谢谢消息。我该怎么做？：

<template name="inquiry">

{{#if showForm }} 

some form

{{else}} 

        <header class="thank-you fade">
            <h2 class="thank-you">Thank You!</h2>
        </header>

        {{/if}}

的CSS：

.fade {
  opacity: 1;
  transition: opacity 200ms ease;
}

我意识到这不起作用，因为谢谢你已经加载到了DOM中。

我该怎么做？

Answer 1

我目前更喜欢的解决方案是始终呈现消息，但在不可见时添加类。这在您的代码中很容易，因为您没有加载单独的模板。

<template name="inquiry">

{{#if showForm }} 

some form

{{/if}} 

    <header class="thank-you show-faded {{#if showForm}}hide-faded{{/if}}">
      <h2 class="thank-you">Thank You!</h2>
    </header>

CSS将是：

.hide-faded {
  opacity: 0;
  transform: scale(0);
}
.show-faded {
  opacity: 1;
  transition: opacity 200ms ease;
}

使用reactiveVar（meteor.js）“显示”后，在模板中淡入淡出

1 个答案: