Animations with reactive #each blocks that change

help
1

Got some jade

with order
  | Order {{ _id }}
  ul.hide-until-render
    each products
      li(style="opacity: 0;")
        | {{ name }}

Then on render I do something like as follows

Template.products.onRendered(function () {
  Materialize.showStaggeredList('.hide-until-render');
});

Template.products.helpers({
  order: function () {
    return Orders.findOne(FlowRouter.getQueryParam('orderId'));
  },
  products: function () {
    return Products.find({
      _id: {
        $in: Orders.findOne(FlowRouter.getQueryParam('orderId')).products
      }
    });
  }
});

This works okay for when it first renders, but whenever it changes, I’d like for it to do it again. For example, if you change the query param of order, it should change all of the products and have the new ones stagger in. Is this possible?

2

Just some pointers, as I don’t know much about animation or Materialize:

  • animation is often managed through the _uihook hidden API. There are a few packages to help with this.
  • did you search for “animation” in the forum? I am quite sure there have been some recent topics about this.
  • Also, you can sometimes do by hand:
Template.products.onRendered(function () {
  var instance = this;
  Tracker.autorun(function() {
    // Get some reactive data
    var order = FlowRouter.getQueryParam('orderId');
    // Wait for rendering to occur
    Meteor.defer(function() {
      // Do some DOM manipulation
      instance.$('.whatever').addClass(...);
    });
  });
});