Re: Consider Leverage more off CSS

CC Public-fx and Tab [replied offlist].

On 8/08/2014 5:47 PM, L2L 2L wrote:
>
>> On Aug 8, 2014, at 3:25 AM, "Alan Gresley" <alan@css-class.com> wrote:
>>
>>> On 8/08/2014 12:22 PM, L2L 2L wrote:

[snipped]

>>> --------------My Proposal--------------
>>>
>>> What I'm proposing is that you can be able to define the
>>> duration--things of that nature-- via CSS too:
>>
>> You already can.
>>
>> http://dev.w3.org/csswg/css-animations/#animation-duration
>>
>> el {
>>   animation-duration: 3s;
>> }
>>
>> Also you can also do other things which you have previously mentioned like 'animation-timing-function property', 'animation-iteration-count', etc.
>>
>> http://dev.w3.org/csswg/css-animations/#contents
>>
>>
>> I would suggest doing a demo and stating what can't be done currently with CSS Animations.
>>
>>
>>
>>> CSS syntax optional version:
>>>
>>> var animA = new Animation(elem,
>>> { left: '100px', top: '300px' },
>>> {"animation-duration": "3s"});
>>>
>>
>> I don't understand this CSS optional version which looks like JavaScript.

[snipped]

>> Alan
>>
>>
>
>>> CSS syntax optional version:
>>>
>>> var animA = new Animation(elem,
>>> { left: '100px', top: '300px' },
>>> {"animation-duration": "3s"});
>> I don't understand this CSS optional version which looks like JavaScript. Anyway, you can not animate from *auto offsets*. It may do something in WebKit but they are not animatable types.
>
> This is CSS syntax, as if you was scripting it in a Slye tag.
>
> I'm trying to convey doing it all via CSS syntax inclose in quotes if the syntax does not meet the rules of ECMAScript's identifier rules. And the EMCAScript camel case style syntax.
>
> To be able to define this in the animation object:
>
> SYNTAX:
> var anim = new Animation(
> ELEMENT_NODE,
>
> [{CSS PRESENTATION PROPERTIES}],
>
> [{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
>
> TIMING VALUE);
>
> So one can have the option of this:
>
> 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"});
>
> Look at the syntax. Ones that are enclose in quotes does not meet the ECMAScript's identifier rules, and the ones that are not, does meet it. The ones that is camel case is the EMCAScript version of that CSS's property.
>
> Do you see the benefit here for programmers. Not much to learn when it's like this, and more freedom.
>
> I'm not asking you to change it, but to include this option.

So what you are wanting is to write JavaScript with a CSS syntax 
optional version. I will leave it to others to reply to your reply since 
JavaScript is not my specialty but atl least we can begin to understand 
your proposal.

Alan

Received on Friday, 8 August 2014 12:05:31 UTC