Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Вот рабочий пример простой анимации с метеор.

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

Забастовкa >

Ответ 2

Существует обходной путь:

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

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