- From: Emanuel Allen <emanuelallen@hotmail.com>
- Date: Mon, 8 Sep 2014 22:08:11 -0400
- To: <public-fx@w3.org>
- Message-ID: <BAY402-EAS158EE075E591D96AF016DD1DECE0@phx.gbl>
With setAttribute(); you define the style attribute via CSS syntax: Node.setAttribute('style', 'animation-duration: 3s; animation-timing-function:linear; animation-delay: 2s; animation-play-state : infinite;'); This will help with use case: 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"}); With all the CSS properties and those to come plus the syntax familiarities. This will help developers. I'm bring my argument of allowing CSS name properties to be an option of fully defining the animation state again. I'm not clear on how my proposal was taken. A part of me worry from that individual respond that he did not fully receive what I was conveying, base on the fact he only mention the CSS property animation name. I feel strongly for all of CSS properties to be able to defined the animation state: CSS ANIMATION, CSS TRANSITION, and CSS TRANSFORM properties. --------------My Proposal-------------- What I'm proposing is that you can be able to define the duration--things of that nature-- via CSS too: Notice: {CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES} I have label each example with a SYNTAX header below. This is my proposal, That it'll be optional to defined all animation via CSS properties and method-like functionalities. Using CSS animation, CSS transition, CSS transform properties for more control, and varieties on how the animation will look, move, and act. Also I believe this will make the TIMING VALUE optional to define with CSS properties instead of at the end of the function. Also in syntax chooses via either CSS inclose in double/single quotes, or via JavaScript camel case style. SYNTAX: 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*/ ---------End of example------------- This will allow for more flexible, optional, and varieties of setting properties. E-S4L N-S4L
Received on Tuesday, 9 September 2014 02:08:47 UTC