Work with complex animations on Blaze - css

Question

I actually looking for a good way to play animations on my app context with Blaze.
To be more explicit, I wrote this super simple example:
<template name="global">
<h1>Hi guys!</h1>
{{> foo}}
</template>
<template name="foo">
<h2>I'm a foo!</h2>
<ul>
{{#each elements}}
{{> bar}}
}}
</ul>
<button name="btnAdd">Add new elem</button>
<button name="btnDel">Delete an elem</button>
</template>
<template name="bar">
<li>{{name}}</li>
</template>
Let's assume we got an Iron-router route which render the global Template.
On this particular render (from "navigate") I want each templates to render with fadeIn.
When click on btnAdd button, a new element created. I wish it would render with SlideInLeft effect.
When click on btnDel button, an element is deleted. I wish it would be destroyed with SlideOutRight effect.
When user navigate to another route, I want all template disappear with fadeOut effect.
Every of my attempt so far wouldn't allow me to do this kind of distinction... I couldn't find any package resolving this problem neither.
I'm actually just playing animation by adding/removing Animate.css class (pretty simple to use and good looking!)
To resume, I want a different animation played depending on the source of the rendering.
Does someone had already face this problem?
BONUS QUESTION: Do you know how to chain animations, like:
render global with fadeIn Effect >> then >> render foo with rotateIn Effect >> then >> render every bar with bounceIn effect

Answer 1

For timing, you can use Meteor.setInterval. For example, you can do $('.elementClass').hide('fast') outside setInterval. It will run first and setInterval will run when you want it to.
For the initial effects, you can use:
Template.templateName.onRendered(function(){
$('.elementClass').fadeIn('fast') //note that element is initially hidden (display:none in CSS). you can use effects from jquery and jquery-ui for more effects. You have to add jquery-ui additionally
})
You can also use jQuery in your router.js, using iron:router.
Router.route('/the-url', function() {
this.render('templateName', {
data: function () {
$('.htmlElement').toggle('slide', {direction:'right'}, 200); //note that the element is initially invisible
}
});
}, {
name: 'routeName'
});