Могут ли изменения в Meteor иметь анимацию?

Как Метеор обрабатывает живые изменения? Например, я не хочу, чтобы изменения были мгновенными, но с какой-то анимацией. Если мы разместим изменяемые элементы с помощью анимации / переходов CSS, это работает? А как насчет анимации jQuery для старых браузеров?

 Tom Wijsman03 июн. 2012 г., 02:41
+1 интересно, это, вероятно, потребует некоторых изменений в реализации.

Ответы на вопрос(3)

Решение Вопроса

Ситуация здесь такова, что у нас есть список предметов. Если пользователь нажимает на любой из этих элементов, элемент будет анимирован на 20 пикселей влево.

JS

//myItem
Template.myItem.rendered = function(){
  var instance = this;
  if(Session.get("selected_item") === this.data._id){
    Meteor.defer(function() {  
      $(instance.firstNode).addClass("selected"); //use "instance" instead of "this"
    });
  }
};

Template.myItem.events({
  "click .myItem": function(evt, template){
    Session.set("selected_item", this._id);
  }
});


//myItemList
Template.myItemList.helpers({
  items: function(){
    return Items.find();
  }
});

Шаблоны

<template name="myItem">
  <div class="myItem">{{name}}</div>
</template>

<template name="myItemList">
  {{#each items}}
    {{> myItem}}
  {{/each}}
</template>

CSS

.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }

Вместо использования причудливого CSS вы также можете анимировать с помощью jQuery:

Template.myItem.rendered = function(){
  if(Session.get("selected_item") === this.data._id){
    $(this.firstNode).animate({
      left: "-20px"
    }, 300);
  }
};

Но тогда вам нужно удалить код CSS.

.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }

 15 июл. 2014 г., 10:11
@TimBartsch я не могу найтиMeteor.defer() из документов. Что оно делает?
 09 мар. 2014 г., 01:21
Спасибо, это помогло мне. Заметкаif(Session.get("selected_item") === this.data._id) не работал для меня; Я должен был изменитьrendered Функция для включения строки, как это вместо этого:$('#'+Session.get("selected_item")).addClass("selected").

1. Reactively: the Meteor way
2. Directly: the jQuery way

Вот рабочий пример: http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game

<template name="foo">
  ..content..
  {{bar}}
</template>

В этом случае Метеор позвонитTemplate.foo.bar каждый раз, когда этот шаблон отображается. Таким образом, в рамках этой функции вы можете выполнять все виды анимации Jquery или CSS3 (например, добавляя класс в div шаблонов).

 24 дек. 2012 г., 19:17
пример здесь был бы великолепен. (обратите внимание, что положительные отзывы за «полезный вопрос» намного больше, чем «ответ полезен»). Может быть, вы можете обновить свой ответ?

Ваш ответ на вопрос