Re: Consider Leverage more off CSS

> On Aug 7, 2014, at 9:51 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
> On Thu, Aug 7, 2014 at 5:34 PM, L2L 2L <emanuelallen@hotmail.com> wrote:
>>> 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?
> [snip your response]
> 
> You responded to me by just quoting your previous emails (and, if I'm
> seeing this correctly, expanding them).  That's the opposite of what I
> asked for. ^_^
> 
> ~TJ

(-_-) no I didn't it was different... Here, I snip off the beginning that explain the following. The first part is my proposal, and second part is a visualization of what I'm trying to convey to you and others: (-_-)

--------------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 02:23:41 UTC