Currently seeking an effective method for implementing animations within my app using Blaze.
To provide further clarification, I have included a basic example below:
<template name="global">
<h1>Hello everyone!</h1>
{{> foo}}
</template>
<template name="foo">
<h2>I am a foo!</h2>
<ul>
{{#each elements}}
{{> bar}}
}}
</ul>
<button name="btnAdd">Add new element</button>
<button name="btnDel">Delete an element</button>
</template>
<template name="bar">
<li>{{name}}</li>
</template>
In the event that we have an Iron-router route rendering the global Template, I aim to incorporate a fadeIn animation during this specific rendering process.
Upon clicking the btnAdd button, a new element is created with a desired SlideInLeft effect.
If the user clicks on the btnDel button to delete an element, it should smoothly disappear with a SlideOutRight effect.
Furthermore, when navigating to another route, all templates are expected to vanish gracefully with a fadeOut effect.
Despite various attempts, I have not been able to achieve these distinct effects and have not found a suitable package to address this issue.
My current approach involves utilizing the Animate.css class for adding/removing animations, which is simple to use and visually appealing.
In summary, I am looking to implement different animations based on the origin of the rendering.
Has anyone encountered similar challenges before?
BONUS QUESTION: Any insights on how to sequence animations, such as:
render global with fadeIn Effect >> then >> render foo with rotateIn Effect >> then >> render every bar with bounceIn effect