tmeasday / transition-helper

transition-helper

NOTE: this package is a proof-of-concept. For a fuller-featured package that wraps uihooks in a nice API, we suggest you check out https://atmospherejs.com/percolate/momentum

This is a basic proof-of-concept package that uses the _uihooks for Meteor Devel.

What it gives you is a basic {{#transition}} helper -- which if you wrap around an {{#each}} or a {{#if}} will animate the removal / addition (and eventually movement) of elements using CSS Transitions.

Check out the basic-example for a simple usage.

Important

You must have a transition defined for the element on the .off-screen -> not .off-screen class change. If you don't, there be dragons.

transition-helper's Issues

Update package/readme

Don't see this on the new package manager. Looks like successor is https://github.com/percolatestudio/meteor-momentum, perhaps direct people there?

[basic-example] node not actually removed on transition's end?

The removeElement hook does fire (confirmed with a console.log), but the .on(EVENTS handler does not for me.* Thus, when I click again after a "removal" in the if-container, an additional .content div is inserted below the last div (which is .content.off-screen).

*I tested this on OSX Mavericks with the latest versions of Chrome and Firefox, and after running meteor update on basic-example to use Meteor 0.8.2.

loose data context on remove when dom tree is too deep

I'm not sure it's your package or blaze that has a problem but when i tried to use your package i get an issue :
when the dom tree is too deep the app lost data context on remove.

I did a sample from your package : https://github.com/Rebolon/transition-helper/tree/bug/whendomtreetoodeep

i just added some template and also some dom element. (sorry for colors in span :-)
You can add items with add button.
Then remove them with the "x" button : some of the data context will be preserved until it's really removed, but all those that are too deep in the tree will be removed immediately.

Hope it will help

transition-helper breaks meteor-connection-banner

I have no idea why, but transition-helper breaks Nate Strauser's connection-banner in 0.8.3-rc1.

The symptoms are, that sometimes the connection-banner is initially shown and if the connection is lost, a new connection-banner is injected into the dom and the old one remains.

Although, I don't have an idea why this happens technically I have a faint suspicion.
I see that Template.transition.rendered applys the hooks to this.firstNode.parentNode._uihooks. I would've expected this.firstNode.parentNode to be the transition helper, but its the document body. Therefore the animation will be applied to everything. and it doesn't matter where you put a {{#transition}}{{/transition}} you could even do the following and get a proper transition.

    {{#transition}}{{/transition}}
    {{#each foo}}
      <div class="content">
        {{bar}}
      </div>
    {{/each}}