CSS轉換在Meteor中不起作用

我有選項卡，其中所選的一個比未選擇的高。CSS轉換在Meteor中不起作用

<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 templates with CSS transitions但我嘗試了保留方法，它使我的點擊事件不起作用，並且加載div不適用於這種情況，因爲轉換髮生在每個選項卡上，而不僅僅是第一次呈現。

來源

2015-10-07 José Manuel Aguirre

儘量考慮創建[**最小的，完整的和可驗證的例子**]（http://stackoverflow.com/help/mcve），因爲它會幫助你，其他SO用戶也在爲您提供更好的解決方案。 – vivekkupadhyay

我認爲它完成了上述原則。它有一個最小的標記，CSS和涉及的屬性，沒有JavaScript，因爲我還沒有在js中解決這個問題（我希望它存在於Meteor中）。你發現什麼東西沒有很好的記錄？ –

請閱讀https://github.com/meteor/meteor/wiki/Using-Blaze#no-more-constant-isolate-or-preserve。從這一點我不知道是否有辦法改變Meteor中的一個div類，並獲得CSS的trasition。有沒有替代方案？我不是在尋找花哨的動畫，只是從我的javascript中分離出的一些CSS3應該可以完成這項工作。任何幫助都是值得讚賞的。 –

我在閱讀了幾種方法後發現了一個解決方案，至少在這種情況下它非常簡單。

如果您不希望模板被反應，請不要使用會話變量（即反應性），請使用正常變量（靜態）。通過這種方式，您可以防止Meteor重新渲染de模板，因此CSS過渡現在看起來不錯。

我發現這個問題有用：Meteor. Prevent template re-rendering or disable reactivity

來源

2015-10-08 18:28:05

CSS轉換在Meteor中不起作用

回答

相關問題