Re: Consider Leverage more off CSS

> On Aug 8, 2014, at 8:05 AM, "Alan Gresley" <alan@css-class.com> wrote:
> 
> 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

Yes, as the syntax demonstrates:

Syntax:

var anim = new Animation(
ELEMENT_NODE, 
[{CSS PRESENTATION PROPERTIES}], 
[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
TIMING VALUE);

Explanation:

var anim = new Animation(
//a element node
ELEMENT_NODE, 
//CSS static properties
[{CSS PRESENTATION PROPERTIES}], 
//CSS motion properties
[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
//timing value
TIMING VALUE);

Example:

This example utilize animation-timing-function ease-in and ease-out effect:
 As it start with right:"25px", it start as an "ease-in" motion. And as it start with left:"25px", it end it with an "ease-out" motion all in 3 second:

CSS/ECMAScript syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
// short hand
[{animation: "none 0 ease-in 0 0 normal none running"}, 
// short hand
{animation: "none 0 ease-out 0 0 normal none running"}], 
3000);

/******
note that I could have omitted:
animation-name : none
animation-duration: 0
animation-delay: 0
animation-iteration-count: 0
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
Since these are default values. But I chosen to put them in, out of demonstration means.
******/

ECMAScript syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
[{animationTimingFunction: "ease-in"},
{animationTimingFunction: "ease-out"}],
3000);

CSS syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
[{"animation-timing-function": "ease-in"}, // short hand
{"animation-timing-function": "ease-out"}], //short hand 
3000);

Timing value set in CSS:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
// short hand
[{animation: "none 3s ease-in 0 0 normal none running"}, 
// short hand
{animation: "none 3s ease-out 0 0 normal none running"}]);

------I do hope you receive what I'm trying to convey with thee above syntax, explanation, and example-----

Also add to where we can set this via style attribute, as one can do so in SVG:

 var anim = new Animation(
element_node, 
[{ style: "right: 25px"},
{style: "left: 25px"}], 
// short hand
[{style: "animation: none 0 ease-in 0 0 normal none running"}, 
// short hand
{style: "animation: none 0 ease-out 0 0 normal none running"}]);

Don't ask yourself why, just remember that developers will be using this tool, and letting them have such freedom to pick and choose what syntax they are more comfortable with is important. All these syntax I demonstrated above are from setting CSS in the style element node or a CSS external file, in ECMAScript with camel casing, and string inclose via the node's method property setAttribute, and via style attribute in an element's open tag.

These can be done already in ECMAScript. I'm concern with if it can be done with the animation objects.

For those of us who use variations of means of setting and manipulating the DOM. 
For those of us who experiment for hours to gain a better understanding with what we can do. 
For those of us who live, eat, sleep, and love ECMAScript to node server side scripting, is who I'm representing for.   

Thank you for reading.

N-S4L

Received on Friday, 8 August 2014 17:25:46 UTC