Meteor has a very elegant way of rendering DOM elements in our web apps, but until now, this hasn't included animations. Fortunately for us, Meteor now supports animations, including animations when an element is first added to the DOM. This recipe will walk you through how to use standard CSS animation techniques inside Meteor.
We will use the codebase from the Using dynamic templates recipe found in this chapter. Please follow that recipe first or download the corresponding codebase.
We will animate the shapes from our previous recipe, demonstrating animation both before and after the elements are first created and rendered.
Because we used SVG elements instead of DOM elements, we need to modify jQuery to be able to use .addClass and .removeClass. Fortunately, there is a custom package available that will add SVG support and add Meteor UI event support at the same time.
In a terminal window, navigate to the root folder of your project and...