CSS过渡在Meteor中不起作用

Question

我有一些标签，选中的标签比未选中的标签的高度大。

<div class="chat-tabs">
<div class="chat-tabs-cont">
    <div id="chat-tab-1" class="chat-tab chat-tab-sel">
        <span class="chat-tab-n">1</span>
        <span class="chat-tab-t">Tab text 1</span>
        <span class="chat-tab-c">11:00</span>
    </div>
    <div id="chat-tab-2" class="chat-tab">
        <span class="chat-tab-n">2</span>
        <span class="chat-tab-t">Tab text 2</span>
        <span class="chat-tab-c">11:30</span>
    </div>
</div>

​

这是通过添加/移除覆盖(增加)标签的标准高度的类chat-tab-sel来实现的。chat-tab类有一个CSS转换：transition: height .3s ease;。

但是，在Meteor中，没有过渡，添加/删除的类具有即时效果。

在这里有一个类似的问题，但是我尝试了Meteor templates with CSS transitions方法，它使我的点击事件不起作用，加载div在这种情况下也不起作用，因为转换发生在每个单击的选项卡上，而不仅仅是第一次渲染。

Answer 1

在阅读了几个方法之后，我找到了一个解决方案，它真的很简单，至少在这个例子中是这样。

如果你不希望模板是反应式的，不要使用会话变量(反应式)，使用普通变量(静态)。这样可以防止Meteor重新渲染de template，因此CSS过渡现在看起来很好。

我发现这个问题很有用：Meteor. Prevent template re-rendering or disable reactivity