jquery - 使用 reactiveVar (meteor.js) 在模板为 "shown"后淡入

Question

我有一个包含两部分的模板 View ，一个是表单，然后是一条感谢消息。我想在提交表单时淡入感谢信息。我该怎么做？:

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