Re: Consider Leverage more off CSS

> On Aug 7, 2014, at 7:25 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
>> On Wed, Aug 6, 2014 at 11:36 AM, L2L 2L <emanuelallen@hotmail.com> wrote:
>> Yes it's different.... I'mma redo it latter.
>> 
>> What I'm proposing is that you can be able to define the duration--things of
>> that nature-- via CSS too:
> 
> I'm still not quite sure what you're suggesting.  You give a ton of
> examples, but I'm not sure precisely which part of the examples are
> showing off what you want.  Can you describe it better, and then give
> an example of its use, rather than relying purely on examples?
> 
> The end of your email appears to contain several more unrelated ideas.
> I'm not sure if that's supposed to be connected to whatever you're
> suggesting with Web Animations, and I'm also not sure what all that
> section is even trying to suggest.  Again, perhaps a simple, short
> description, along with a simple example?
> 
> ~TJ

--------EXPLAIN HERDERS---------

This section is to explain the headers for ech example that will follow this section:

-JavaScript syntax CSS optional version

Means that it use the CSS JavaScript syntax form, when writing this in JavaScript source code.

For example:

elem.style.backgroundColor = "#0000ff";

-CSS syntax optional version

Is when you set it in either an external file, or internal --via style element-- file, or via JavaScript source code using the setAttribute method. For example:

Via external/internal
P{
  background-color : #0000ff;
}
Via JavaScript

P.setAttribute("background-color","#0000ff");

-MIX

Is a mixture of JavaScript/CSS syntax version.

-JavaScript/CSS syntax version:

Is syntax of a CSS property that don't conflict with the rules of name properties in JavaScript. I.e. They don't need to be inclose in double/single quotes.

If you would refer back to that long message, and go to the CSS properties, you can read/see the possibilities via the animations, transforms, and transitions 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}

Under/beside the 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.

NS4L

Received on Friday, 8 August 2014 00:36:47 UTC