Meteor Transitioner Example

layout.html

<template name="layout">
    {{#transitioner transitionIn=transitionIn transitionOut=transitionOut}}
        {{> yield}}
    {{/transitioner}}
</template>

layout.js

// Set the default transitions
Template.layout.transitionIn = {
    before: function (node) {
        // Hide the element until the animation
        // starts so it does not flash on-screen.
        node.style.webkitTransform = 'translateY(' + window.innerHeight + 'px)');
    },
    properties: { translateY: [0, window.innerHeight] },
    options: {
        duration: 400
    }
};
    
Template.layout.transitionOut = 'transition.slideDownOut';

transitioner.html

<template name="transitioner">
    <div>
        {{> UI.contentBlock}}
    </div>
</template>

transitioner.js

Template.transitioner.rendered = function () {
    var self = this;

    var views = {};

    // Store the first view for removeElement
    var initialChild = self.firstNode.children[0];
    if (initialChild) {
        views[initialChild] = Blaze.getElementView(initialChild);
    }

    self.firstNode._uihooks = {
        insertElement: function (node, next) {
            var insertNode = function () {
                next.parentNode.insertBefore(node, next);
            };

            // Check if the template has a transitionIn hook
            // otherwise use the default.
            var view = Blaze.getElementView(node);

            // Keep track of the view for removeElement
            views[node] = view;

            var transition = view.template.transitionIn || self.data.transitionIn;
            if (transition) {
                transition.before && transition.before(node);
                insertNode();
                $(node).velocity(transition);
            } else {
                insertNode();
            }
        },
        removeElement: function (node) {
            var removeNode = function () {
                node.parentNode.removeChild(node);
            };

            var view = views[node];
            view && delete views[node];

            var transition = view && view.template.transitionOut || self.data.transitionOut;
            if (transition) {
                transition.before && transition.before(node);

                if (_.isObject(transition)) {
                    transition.options.complete = removeNode;
                    $(node).velocity(transition);
                } else {
                    $(node).velocity(transition, removeNode);
                }
            } else {
                removeNode();
            }
        }
    }
};