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過渡現在看起來不錯。

我發現這個問題很有用： 流星。 防止模板重新呈現或禁用反應性