Re: Adding on to the animation objects

Hello Brian,

> On Aug 17, 2014, at 7:54 PM, "Brian Birtles" <bbirtles@mozilla.com> wrote:
> 
> 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.
> Unfortunately, I think this proposal adds complexity to the interface. For example, what is the expected behavior when the author writes the following?

First off, thank you for responding.

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

Second, I don't see anyone in there right mind doing this.

I understand your argument. To respect your question, it should fall back on the more detail one.
 
> Likewise, allowing 'animation' seems odd since it seems to have different syntax to the 'animation' shorthand in CSS.


Third, shouldn't it be possible since these feature already defined? Just adding a second arguments section to handle CSS animation, transition, and transforming properties. If that area is not an object and instead the timing value, than it will still function as so. With setAttribute(); it take CSS properties, and the JavaScript environment corresponding names that link to these.

Yes, adding on to the spec can complicate it --even know it's already complicated to read, it being w3c spec-- but I believe this will truly help developers be more expression.

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


... To answer your question, I don't have a problem. Just feel this would be a great thing to add.

> 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 Monday, 18 August 2014 01:24:02 UTC