Path: csiph.com!eternal-september.org!feeder.eternal-september.org!reader01.eternal-september.org!.POSTED!not-for-mail
From: Ben Bacarisse <ben.usenet@bsb.me.uk>
Newsgroups: comp.lang.javascript
Subject: Re: TWO lines of code for transforms?
Date: Wed, 15 May 2019 22:06:43 +0100
Organization: A noiseless patient Spider
Lines: 58
Message-ID: <874l5vl95o.fsf@bsb.me.uk>
References: <de0b77b1-4e91-4d2f-b449-8f554ad3bd6f@googlegroups.com> <317348f2-34c1-4a75-bafe-1e4072aedb9c@googlegroups.com> <a6aa0673-cce7-47c7-a97a-635cd0c22fbc@googlegroups.com> <877eauo7g0.fsf@bsb.me.uk> <ef5f0cce-7f0a-4efb-9367-1848456865b1@googlegroups.com> <87v9yemiv7.fsf@bsb.me.uk> <bffd7eca-b054-46ab-9ea6-81403cddb8b2@googlegroups.com>
Mime-Version: 1.0
Content-Type: text/plain
Injection-Info: reader02.eternal-september.org; posting-host="96d09c4f599605de1406fee9c263f424"; logging-data="29502"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX1+e7JOVQwgVT9DLgTQphLrprLznRBQfZCE="
Cancel-Lock: sha1:oxKNr7o2VxeJJ/Fe92n28Uyd6rk= sha1:5KWz47KVHz4Ic6X5/TK+zLrms2s=
X-BSB-Auth: 1.377c16bd3cab3580fff1.20190515220643BST.874l5vl95o.fsf@bsb.me.uk
Xref: csiph.com comp.lang.javascript:36612

groovee@cyberdude.com writes:

> On Monday, 13 May 2019 21:45:00 UTC+5:30, Ben Bacarisse  wrote:
>> 
>> You probably need to see some more examples to reset the view you've
>> formed of how this stuff works.  Here's one that uses a margin:
>> 
>> <!DOCTYPE html>
>> <head>
>>     <style>
>>      p { margin-left: 10em; transition: margin-left 2s; }
>>      p:hover { margin-left: 1em; }
>>     </style>
>> </head>
>> <body>
>>     <p>This is paragrah with a wide margin.</p>
>> </body>
>
> OK, so the first "p" line means that "if there are any changes to the
> margin-left property, that change will take 2s to complete" - is that
> it?

Roughly, yes.

> Btw, I notice that if you put the "p:hover" line BEFORE the first "p"
> line, it still works!! - how the hell is THAT? How does that work??

A remark like this means you have a picture of how this stuff works and
you were surprised when you made a change to the CSS because the result
did not match your expectations.  It's not easy to fix that because I
can't find out what your internal picture is, and whole books have been
written about how this stuff really works.

The order of CSS statements only matters when there is a direct clash --
a later setting will override an earlier one -- but otherwise the rules
just establish a set of facts.  I'm being a bit vague with "direct
clash".  To find out the details you's have to learn about selectors and
specificity, but p and p:hover are different selectors with different
specificity and different values for margin-left.  The order these facts
are given in makes no difference here.

> Also - there's no "transform" anywhere at all in the above code...?!!
> Isn't that compulsory? (I'm getting Confused a little more...)

No.  Forget what you think you know about transform.  It is not an
action, but a thing -- a property -- like margin-left.  An element's
transform is just one of the things that can be made to transition, but
you can give an element a transform that never changes and you make
other properties of an element transition, as in the example above.

The transform really just established a relative coordinate system.
Maybe it should have been called something else like "mapping" or
"coordinates".  If you think of it like that, then "transition:
transform 2s" means "changes to the coordinate system for the element
take 2s".

-- 
Ben.