Making Animation Simple
This should provide the proper behavior when using props: {} to animate an svg element. Listing the elements as readonly svg props changes the setter behavior to use setAttribute. This is the same strategy used with viewBox.
Moved typings alongside their definitions. This should also work well with the lib.es2015 directory.
See https://notoriousb1t.com/just-animate-1-0-0-beta/ for a breakdown of the larger features
Before starting on 1.0.0, I went through and added unit tests for all helper methods and improved the structure of the project so it would be simpler.
In previous versions, any css property used in the animation needed a starting and ending value. Now when JustAnimate processes keyframes, it uses the first value for a given property as the starting value and the last value for a given property as the end value. For instance:
const keyframes = [
{ color: 'red' },
{ opacity: 0 },
{ color: 'blue' },
{ opacity: 1 }
];
const timings = {
duration: 2000
};
Just.animate(keyframes, '#target', timings);
In the example, the initial color will be red, and the final color will be blue.
The initial opacity will be 0, and the final value will be 1.
Added Angular2 and SystemJS support. To install for these environments, run this command at the top level of your project on a command line
npm install just-animate --save
Then when the application is being bootstrapped, inject your animation pack:
import { JustAnimate, animations } from 'just-animate';
JustAnimate.inject(animations.ANIMATE_CSS);
To animate, call animate on an instance of JustAnimate
import { JustAnimate, animations } from 'just-animate';
var just = new JustAnimate();
just.animate('fadeIn', '#animate-me');
updated api to work better with angular2