Re: Adding on to the animation objects

Hi Emanuel,

On 2014/08/17 1:43, L2L 2L wrote:
> 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.

Thanks for your proposal. What is the problem you're trying to solve or 
the difficulty you're facing?

Unfortunately, I think this proposal adds complexity to the interface. 
For example, what is the expected behavior when the author writes the 
following?

   elem.animate({ opacity: 0 },
     { 'animation-duration': '3s',
       'animation': '4s' },
     5000);

Likewise, allowing 'animation' seems odd since it seems to have 
different syntax to the 'animation' shorthand in CSS.

Requiring the additional CSS argument seems unfortunate too.

There are other considerations but first of all it would be good to know 
what problem you're seeking to solve.

In general we want to reduce the surface area of the API, that is, keep 
it as simple as possible since once we add a feature it's very hard to 
remove. As a result, I'm afraid adding more ways of setting properties 
would need strong justification.

Best regards,

Brian

> 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 Sunday, 17 August 2014 23:54:33 UTC