Schimbările live Meteor au animații?

Cum traversează Meteor schimbările live? De exemplu, nu vreau ca schimbările să fie instantanee, ci cu un fel de animație. Dacă plasăm elementele modificate folosind animații/tranziții css, funcționează acest lucru? Ce zici de animațiile jQuery pentru browserele mai vechi?

0
+1 interesant, probabil acest lucru va necesita unele modificări de implementare.
adăugat autor Tom Wijsman, sursa

3 răspunsuri

Pentru tranzițiile CSS, există două opțiuni cu care puteți merge:

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

Here is a working example: http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game

0
adăugat

There is a workaround like this:

 

In this case Meteor will call Template.foo.bar everytime this template gets rendered. So within this function you can do all kinds of jQuery or CSS3 animations (for example by adding a class to the templates div).

0
adăugat
un exemplu aici ar fi fost grozav. (observați cum se adaugă valori pentru "întrebarea utilă" sunt mult mai mult decât "răspunsul este util"). Poate vă puteți actualiza răspunsul?
adăugat autor Alex Okrushko, sursa

Iată un exemplu de animație simplu cu meteor.

Situația este că avem o listă de articole. Dacă utilizatorul face clic pe oricare dintre ele, elementul va anima 20px spre stânga.

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-uri



 

 

CSS

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

În loc să utilizați CSS fantezist puteți anima și cu jQuery:

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

Dar atunci trebuie să eliminați codul CSS.

.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }
0
adăugat
Mulțumesc, acest lucru ma ajutat. Notă dacă (Session.get ("selected_item") === this.data.id) nu a funcționat pentru mine; A trebuit să modific funcția rendered pentru a include o linie ca aceasta: $ ('#' + Session.get ("selected_item")) addClass ("selected") >.
adăugat autor Racing Tadpole, sursa
@TimBartsch Nu găsesc Meteor.defer() din docs. Ce face?
adăugat autor Haikal Nashuha, sursa