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: Mon, 13 May 2019 17:14:52 +0100
Organization: A noiseless patient Spider
Lines: 52
Message-ID: <87v9yemiv7.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>
Mime-Version: 1.0
Content-Type: text/plain
Injection-Info: reader02.eternal-september.org; posting-host="4cbdb3492756a662adac8f6f3c007930"; logging-data="18243"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX1+u2X2ZamhrbqtAyizi5+JXsVw6fniH7cA="
Cancel-Lock: sha1:zCZDRWgRZIpXcbCdftS7jLu0wLs= sha1:kP6k2gpvY8UEhAxChqlXaM9Gkjg=
X-BSB-Auth: 1.daddd749155077f48cdb.20190513171452BST.87v9yemiv7.fsf@bsb.me.uk
Xref: csiph.com comp.lang.javascript:36607

groovee@cyberdude.com writes:

> On Monday, 13 May 2019 18:08:44 UTC+5:30, Ben Bacarisse  wrote:
>
>> 
>> Lots of things.  There's good documentation available on the web if you
>> know where to look.  For example
>> https://developer.mozilla.org/en-US/docs/Web/CSS/transition
>> 
>> Did you try asking in a CSS group?  You posted two assignments, but the
>> question was not really about scripting at all.
>> 
>> -- 
>> Ben.

It's best to cut signatures.

> OK, I don't get it. This is an example from that page:
>        
>          transition: margin-right 2s;
>
> Margin here is a "thing" that's part of the page, it's visible and
> tangible. How can THAT go on the right hand side, AS WELL AS
> "transform 1s"? "Margin" is a NOUN, "Transform" is a VERB, isn't it??

transform is also a noun and it might help you think of it as one in the
example you gave.

The line above means that changes to margin-right will take 2 seconds to
complete.  Your original example said that changes to the transform
should take 1 second.

> I'm quite thoroughly confused :(

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>

I've put it up at: http://bsb.me.uk/testing/trans.html

-- 
Ben.