在使用 reactiveVar (meteor.js) “显示”后淡入模板的一部分

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;
}