Re: partial polyfill for new SVG DOM proposal

What for??? Should we all be pushing toward web animations api?

var anim = new Animation(
ELEMENT_NODE, 

[{CSS PRESENTATION PROPERTIES}], 

[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],

TIMING VALUE);

----------------Example----------------
EXAMPLE:

var anim = elem.animate({ opacity: 0 }, 3000);

JavaScript syntax CSS optional version:

var anim = elem.animate(
{ opacity: 0 }, 
{animationDuration:"3s"});/* it could be just a short hand, but I would still express the un-short version both for readability and respect to CSS*/ 

CSS syntax optional version:

var anim = elem.animate(
{ opacity: 0 }, 
{"animation-duration":"3s"});

-----------------

// Specify multiple properties at once
var animA = new Animation(elem, { left: '100px', top: '300px' }, 3000);

JavaScript syntax CSS optional version:

var animA = new Animation(elem, 
{ left: '100px', top: '300px' }, 
{animationDuration: "3s"});

CSS syntax optional version:

var animA = new Animation(elem, 
{ left: '100px', top: '300px' }, 
{"animation-duration": "3s"});

---

// Specify multiple frames
var animB = new Animation(elem, 
[ { left: '100px' }, { left: '300px' } ], 
3000);

JavaScript syntax CSS optional version:

var animB = new Animation(elem, 
[ { left: '100px' }, { left: '300px' } ], 
{animationDuration: "3s"});

CSS syntax optional version:

var animB = new Animation(elem, 
[ { left: '100px' }, { left: '300px' } ], 
{"animation-duration": "3s"});

-----

elem.animate({ color: 'red' }, 2000);

JavaScript syntax CSS optional version:

elem.animate(
{ color: 'red' }, 
{animationDuration: "2s"});

CSS syntax optional version:

elem.animate(
{ color: 'red' }, 
{"animation-duration": "2s"});

MIX:

var anim = new Animation(
element_node, 
[{ left: "25px"},{left: "50px"}], 
{animation: "linear"}, //short hand
3000);

JavaScript/CSS syntax version:

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
{animation: "5s linear 2s infinite"}); /*all define in the short hand property; animation*/

var anim = new Animation(
element_node, 
[{ left: "25px"},{left: "50px"}], 
{animation: "linear"}, //short hand
3000);

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
[{"animation-duration": "3s"},
{"animation-timing-function":"linear"},
{"animation-delay":"2s"},
 {"animation-play-state":"infinite"}]); 

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
[{animationDuration: "3s"},
{animationTimingFunction:"linear"},
{animationDelay:"2s"},
 {animationPlayState:"infinite"}]); 

var anim = new Animation(
element_node, 
[{ left: '25px' },{left: "50px"}], 
{animation: "3s linear 2s infinite"});


E-S4L
N-S4L

> On Aug 17, 2014, at 2:58 AM, "Cameron McCormack" <cam@mcc.id.au> wrote:
> 
> As requested during this week's teleconference, I added an example that uses getTransformItems()/setTransformItems() to manipulate the transform="" of some elements.  See transform-changes-*.html at http://heycam.github.io/new-svg-dom/examples/.
>

Received on Sunday, 17 August 2014 08:39:32 UTC