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中没有过渡，添加/删除的类具有即时效果。

这里有一个类似的问题是带有CSS过渡的流星模板，但是我尝试了save方法，这使我的click事件不起作用，并且在这种情况下，加载div不起作用，因为过渡发生在每个单击的选项卡上，不仅发生在第一次渲染上。

Answer 1

在阅读了几种方法之后，我找到了一个解决方案，它确实非常简单，至少在这种情况下如此。

如果您不希望模板是反应式的，请不要使用会话变量（反应式），而应使用常规变量（静态）。 这样，您可以防止Meteor重新呈现模板，因此CSS过渡现在看起来不错。

我发现这个问题很有用： 流星。 防止模板重新呈现或禁用反应性