Meteor: Deleting a message and animating other messages with _uihooks

Question

In "Meteor", when I delete a message from the collection, "Identifier", for example, the messages under this message will move upwards, removing deleted messages.

Ive read that I have to use _uihooks for this, but Im just not sure how to implement it.

Can someone help me, perhaps with a simple example from Meteorpad?

Answer 1

What you are trying to achieve is pretty simple, and you really don't need a third-party library for this. I suppose the only problem here is that _uihooks not very well documented, so you pretty much on their own to figure out how this works.

Example

Here's a general idea:

 Template.body.onRendered(function() { var container = this.$('.ui.page.grid')[0]; container._uihooks = { insertElement: function(node, next) { // this is the default behavior container.insertBefore(node, next); }, removeElement: function(node) { var $node = $(node); $node.removeClass('visible'); // can't use Meteor.setTimeout here because // it will complain about setting timeouts // inside simulations ... setTimeout(function() { $node.remove(); }, 1000); }, }; }); 

There is also another hook called movedElement , but you probably don't need to know it.

So, basically, you need to grab a container element that will “listen” for changes in its child array. When an item is inserted or removed, the corresponding hooks are called. The arguments node and next represent the element of interest and its next sibling, respectively.

Having a hook defined for this action prevents the default behavior, so you are responsible for inserting / removing an element. But this is wonderful, because you have the opportunity to perform the corresponding animation before completely getting rid of the element. It uses css animations attached to the visible class.

To find out how this works in practice, go here:

http://uihooks-example.meteor.com

Further reading

The source code for the example is available on GitHub:

https://github.com/apendua/uihooks-example

If you want to better understand how the _uihooks API _uihooks , check out the Meteor source code here:

https://github.com/meteor/meteor/blob/devel/packages/blaze/domrange.js

Gotchas

insertElement not called when elements are initially displayed. Therefore, it is important to consider this if you plan to perform animation when you insert a new element.

Answer 2

Instead of using uihooks, Percolate Studio has created an amazing package called Momentum that simplifies the use of uihooks ( http://atmospherejs.com/percolate/momentum )! You can wrap the publication template so that the messages under the deleted message slide up so that

 {{#momentum plugin='fade'}} {{#each posts}} {{> Post}} {{/each}} {{/momentum}} 

Here is an example of this behavior Meteorpad http://meteorpad.com/pad/sGu4A4nrQ56cXywxr/Momentum%20example . Good luck