Вопрос по – Могут ли изменения в Meteor иметь анимацию?

39

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

+1 интересно, это, вероятно, потребует некоторых изменений в реализации. Tom Wijsman

Ваш Ответ

3   ответа
2

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

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

5

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

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

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

Ситуация здесь такова, что у нас есть список предметов. Если пользователь нажимает на любой из этих элементов, элемент будет анимирован на 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; }

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

Похожие вопросы