Estoy realizando un proyecto en el cuál un usuario puede dar votos positivos o negativos a cada elemento, en este saco, sitios web, y que filtra los resultados de mayor a menor número de votos.
El problema viene cuando un elemento adquiere mas votos que otro, la plantilla es reactiva por lo cuál cambia inmediatamente de posición el elemento, y lo que necesito es que haya una animación retardada para que sea mas cómodo visualmente para el usuario.
El código de la plantilla es este principal es este:
Template.sites_listing.helpers({
websites: function () {
if (Session.get("userFilter")) {// they set a filter!
// return Websites.find({createdBy: Session.get("userFilter")}, {sort: {createdOn: -1, rating: -1}});
}
else {
return Websites.find({}, {sort: {'votes.Up': -1}});
}
}
});
Y este es el código del evento de la plantilla de cada objeto:
Template.website_item.events({
"click .js-upvote": function (event) {
var website_id = this._id;
console.log("Up voting website with id " + website_id);
Websites.update({_id: website_id},
{$inc: {'votes.Up': 1}});
return false;
},
"click .js-downvote": function (event) {
var website_id = this._id;
console.log("Down voting website with id " + website_id);
Websites.update({_id: website_id},
{$inc: {'votes.Down': 1}});
return false;
}
});
He encontrado un ejemplo del código pero no sé como condicionarlo para que al momento de actualizar la plantilla y mover un elemento por encima del otro pueda agregar una animación:
// use jquery to hide the image component
// then remove it at the end of the animation
$("#"+image_id).hide('slow', function(){
Images.remove({"_id":image_id});
})
Alguién tiene idea de como hacer esto?