Метеор: Анимация обновленного контента

Question

У меня есть приложение Meteor, которое является базовым списком табло, заполненным моими пользователями, которые представляют свои оценки после игры в простой игре. На табло показаны десятки десятков и, очевидно, реагирует на последние данные в db. Я хочу знать, есть ли способ оживить эти баллы в списке, когда они обновляются и перемещаются выше/ниже друг друга (небольшой слайд или что-то еще), а не просто появляются и выходят.

Я нашел этот пакет для анимации контента, который был вставлен или удален - https://atmospherejs.com/webtempest/animate, и это здорово, но ничего не предлагает для обновленного контента. Я видел кое-что о uiwebhooks в метеор, но не могу найти ничего о том, как использовать его в моем проекте.

Я не против, если анимация является основным пользовательским интерфейсом от Meteor, CSS или jQuery, мне просто нужно знать, как их называть. Просто добавить и удалить класс для этого элемента было бы достаточно для меня, чтобы продолжить.

Я сторонник разработчика и новый для Метеор, так извиняюсь, если это немного дезинформированный пост. Все, что могло бы указать мне в правильном направлении, было бы оценено.

Answer 1

спасибо за ваш вопрос.

Я никогда не работал с Meteor, но из того, что я знаю об анимации, я ожидаю, что они определены в файле css под определенными именами классов, это правда?

Если это так, то самый простой способ «перезапустить» анимацию, если вы используете ключевые фреймы, заключается в том, чтобы добавить/удалить класс, ответственный за анимацию, из динамически генерируемого элемента.

Я нашел этот небольшой пример кода в документации Метеора:

animated.your-custom-class.zoomIn { 
-webkit-animation-duration: 500ms; 
animation-duration: 500ms; 
} 

animated.your-custom-class.bounceOut { 
-webkit-animation-duration: 2000ms; 
animation-duration: 2000ms; 
} 

Это заставляет меня думать, что анимация действительно определена для конкретных названий класса.

Попробуйте мое предложение и после обновления, если это решит вашу проблему, пожалуйста :)