Re: TWO lines of code for transforms?

From	Ben Bacarisse <ben.usenet@bsb.me.uk>
Newsgroups	comp.lang.javascript
Subject	Re: TWO lines of code for transforms?
Date	2019-05-15 22:06 +0100
Organization	A noiseless patient Spider
Message-ID	<874l5vl95o.fsf@bsb.me.uk> (permalink)
References	(2 earlier) <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>

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-10 03:52 -0700
  Re: TWO lines of code for transforms? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-10 13:38 +0200
  Re: TWO lines of code for transforms? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-05-10 14:27 +0200
    Re: TWO lines of code for transforms? "Mark-" <nospam@mapson.xyz> - 2019-05-10 14:13 +0000
      Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-11 11:26 +0100
        Re: TWO lines of code for transforms? Julio Di Egidio <julio@diegidio.name> - 2019-05-11 04:20 -0700
          Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-11 14:31 +0100
            Re: TWO lines of code for transforms? Julio Di Egidio <julio@diegidio.name> - 2019-05-11 08:29 -0700
              Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-11 16:59 +0100
                Re: TWO lines of code for transforms? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-05-11 17:55 +0200
              Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-11 18:31 +0100
                Re: TWO lines of code for transforms? Gene Wirchenko <genew@telus.net> - 2019-05-11 22:01 -0700
          Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-11 18:18 +0100
            Re: TWO lines of code for transforms? Gene Wirchenko <genew@telus.net> - 2019-05-11 22:04 -0700
              Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-12 10:27 +0100
                Re: TWO lines of code for transforms? Gene Wirchenko <genew@telus.net> - 2019-05-14 10:44 -0700
  Re: TWO lines of code for transforms? Ram Tobolski <ramtob@gmail.com> - 2019-05-11 07:06 -0700
    Re: TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-13 04:28 -0700
      Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-13 13:38 +0100
        Re: TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-13 07:31 -0700
          Re: TWO lines of code for transforms? Ram Tobolski <ramtob@gmail.com> - 2019-05-13 09:11 -0700
          Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-13 17:14 +0100
            Re: TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-14 23:56 -0700
              Re: TWO lines of code for transforms? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-15 09:43 +0200
              Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-15 22:06 +0100

csiph-web