我有一个包含两部分的模板 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 中了。
我该怎么做?
最佳答案
我目前更喜欢的解决方案是始终呈现消息,但在它不可见时添加一个类。这在您的代码中很容易,因为您没有加载单独的模板。
<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;
}
关于jquery - 使用 reactiveVar (meteor.js) 在模板为 "shown"后淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35661288/