meteor-template-animation-helper

meteor-template-animation-helper copied to clipboard

Note: As of Meteor 0.8.3 I recommend using the animation-helper or animation-helper-velocity package instead. If you want to have the dynamic template rendering as well you can still use the view-manager package additionally to using the above packages e.g:

{{> DynamicTemplate placeholder="myPlaceholder"}}

<template name="comesIntoPlaceHolder">
    {{#Animate}}
        <div class="animate">
        ...
        </div>
    {{/Animate}}
</template>

Installation

$ mrt add template-animation-helper

Update: the "delay" property was removed, as its not necessary anymore. If you need delays for animations please use the css declaration "transition-delay".

Description

This package makes it possible to animate templates.

For a demo see http://templateAnimationHelperDemo.meteor.com or https://github.com/frozeman/meteorTemplateAnimationHelperDemo

When using the {{> AnimateTemplate ...}} helper your template will wait for all animations to be finished on elements with the class animate. When a template using this helper gets rendered, it will remove the animate class from your elements, causing your css transition to start. When the template then gets removed, by setting its templateKey inside the Session or View object to FALSE, it re-adds the animate class to the respective elements, causing them to animate back to its original state. After the animation happend, the template will be removed properly.

You can either use Session, or the View class of the view-manager package. By default it uses Session to render templates at the position of the {{> AnimateTemplate}} helper, but when the view-manager package is available it uses the View class.

Usage

Use the {{> AnimateTemplate}} helper or AnimateTemplate method and pass it a Session or View key name like {{> Animate placeholder="myKey"}}. Then use the Session/View.set('keyName', 'templateName') to render a template at this position.

Additional you have to add a animate class to element(s) inside your template, which you want to animate. The animate class should put your elements in the state, before your template is visible. So that when the animate class gets removed a transition to its visible state is happening.

An example of dynaimcally showing/removing a templates

// HTML

<template name="myTemplate">
    <div class="myTemplateWrapper animate">
        ...
    </div>
</template>

// CSS

.myTemplateWrapper {
    opacity: 1:
    transition: opacity 2s;
}
.myTemplateWrapper.animate {
    opacity: 0;
}

Place a template animation helper for mytemplateKey somewhere in your app:

{{> AnimateTemplate placeholder="myKeyName" context=optionalDataContext}}

To fade in the template from above at the position of the helper call

View/Session.set('myKeyName', 'myTemplate');

To fade out the template call

View/Session.set('mytemplateKey', false);

Return an AnimateTemplate from inside a helper

// HTML
{{> AnimateTemplate myhelper}}

// JS
Template.myTemplate.myhelper = function(){
    return {
        placeholder: 'myKeyName'
    };
};

// Then you can render the template by calling
View/Session.set('myKeyName','templateName');

Passing a template name to the {{> AnimateTemplate}} helper

{{> AnimateTemplate template="myTemplate"}}

You can also pass a template name to the helper, this will render and animate the template in place immediately, The data context of this template gets additionally the _templateAnimationKey, so you can later manually animate the template out. To do that call the following inside a helper or event of that specififc template:

View/Session.set(this._templateAnimationKey, false);

The {{#Animate}} block helper

{{#Animate}} block helper, which will remove any animate class from its child elements when rendered.

{{#Animate}}
    <div class="animate">
        animates this content here
        (you must provide some css transitions for the animate class)
    </div>
{{/Animate}}