Jquery atmospherejs.com如何在搜索页面内外创建转换？

我想创建一个全屏搜索页面，通过会话打开和关闭。但我不想让一个空白屏幕突然出现；我想要一些类似atmospherejs.com在您开始搜索时所做的事情。以下是我到目前为止的情况：

全屏搜索页面

 <template name="searchPage">
     <div class="container">
          <input id="search">
     </div>
 </template

 Template.homePage.events({
     'click #open-button: function (e) {
          Session.set('openSearch', 'true');
     }
 });

 Template.searchPage.events({
     'click #close-button: function (e) {
          Session.set('openSearch', null');
     }
 });

关闭搜索页面

 <template name="searchPage">
     <div class="container">
          <input id="search">
     </div>
 </template

 Template.homePage.events({
     'click #open-button: function (e) {
          Session.set('openSearch', 'true');
     }
 });

 Template.searchPage.events({
     'click #close-button: function (e) {
          Session.set('openSearch', null');
     }
 });

控制会话

 Template.homePage.helpers({
     searchIsOpen: function (e) {
          Session.get('openSearch');
     }
 });

---

我不确定我是否需要一个特定的软件包，或者我如何在使用过渡动画的同时将开场白与会话结合起来。最终，当搜索页面淡入时，我希望主页的内容淡出，反之亦然。有什么想法吗？

在布局容器上设置“.show search”类的等价物，并始终呈现空的搜索页面（隐藏），从而通过CSS转换搜索页面

对以CSS为中心的技术不感兴趣？签出利用Meteor的UI挂钩在不闪烁屏幕的情况下设置节点进出动画