The ability to use animations is one of the main features of maquette.
You can use the the following properties of a virtual DOM node to trigger animations:
There are two ways of doing animations: programmatically and using CSS Transitions.
We will first explain how to use programmatic animations and after that we
explain CSS Transitions.
Programmatic animations can be applied by assigning functions to the animation properties. These functions have the following signatures:
enterAnimation: function(domNode, properties)
exitAnimation: function(domNode, removeDomNodeFunction, properties)
updateAnimation: function(domNode, properties, previousProperties)
Inside these functions, you can do whatever you wish to animate the domNode.
You will usually use an animation library like velocity.js to start an animation.
With exit animations you need to make sure that you call the provided
removeDomNodeFunction upon completion of the animation.
The following live example demonstrates programmatic animations using velocity.js.
Those of you who are familiar with AngularJS or React know that there is a technique to use CSS Transitions to animate entering and exiting of DOM elements. You can use the same technique with maquette.
Note however that this technique is less versatile than programmatic transitions. Both CSS Transitions and libraries like velocity.js are equally capable of delivering smooth 60 frames per second animations and are using hardware acceleration.
The best way to explain this technique is through an example. Let us say an element with the enterAnimation
"slideUp" is added, then the following happens:
- The CSS class
"slideUp"is added to the element
- Immediately afterwards, the CSS class
- The browser waits until a CSS transition finishes on the element
- Both CSS classes are removed again.
You can then use the following css styles to trigger the desired CSS Transition:
-webkit-transition: 0.5s ease-out height;
transition: 0.5s ease-out height;
We provide a library maquette-css-transitions which creates the desired
exitAnimation functions from the animation css-class (
slideDown in our example).
The example below shows how this works.
If you want to see a demonstration of what else is possible with animations in maquette, have a look at the hero-transition demo.