Переходы 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 нет перехода, добавленный/удаленный класс имеет мгновенный эффект.

Аналогичный вопрос здесь Meteor templates with CSS transitions, но я попробовал метод сохранения, и он не активировал мои события щелчка, и загрузочный div не работает для этого случая, потому что переходы происходят на каждой выбранной вкладке, а не только на первом рендере.

источник

2015-10-07 José Manuel Aguirre

Попробуйте рассмотреть вопрос о создании [** Minimal, Complete, и Проверяемость пример **] (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. С этого момента я не знаю, есть ли способ изменить класс div в Meteor и получить с ним CSS-trasition. Есть ли альтернатива этому? Я не ищу причудливые анимации, только некоторые CSS3, отделенные от моего javascript, должны выполнять эту работу. Любая помощь будет оценена. –

Я нашел решение после прочтения нескольких методов, и это действительно просто, по крайней мере для этого случая.

Если вы не хотите, чтобы шаблон был реактивным, не используйте Session Vars (которые являются реактивными), используйте обычные переменные (статические). Таким образом, вы мешаете Метеору повторно отображать шаблон, и поэтому переход CSS выглядит хорошо.

Я нашел этот вопрос полезным: Meteor. Prevent template re-rendering or disable reactivity

источник

2015-10-08 18:28:05

Переходы CSS, не работающие в Meteor

ответ

Смежные вопросы