Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #32587

Re: Rotating on click with ANIMATION

Show all headers | View raw

bit-naughty@hotmail.com wrote on 10 Feb 2017 in comp.lang.javascript:

> On Thursday, February 9, 2017 at 5:12:58 AM UTC-6, Evertjan. wrote:
> 
>> ===================================
>> <style type='text/css'>
>> div#el {
>>    display:inline-block;
>>    margin:200px 120px;
>>    transform-origin: center center;
>>    font-size:80px;
>>    border:2px red solid;
>>    transition:transform 1s ease;
>> }
>> </style>
>> 
>> <div id=el>Click me to move!</div>
>> 
>> <script type='text/javascript'> 'use strict'
>> 
>> document.getElementById("el").addEventListener("click", function() {
>>    let x = 
>>       'document.getElementById("el").style.transform =
>>       "rotate($deg)";'; window.setTimeout(x.replace('$','45'), 1);
>>       window.setTimeout(x.replace('$','-45'), 1000);
>>       window.setTimeout(x.replace('$','0'),2000);
>>    }
>> );   
>> 
>> </script>
>> ===================================
>> 
> 
> Wow! You mean you have to do all that yourself??!!

No, you don't have to, as you could use CSS to do the whole thing 
[but for the click detection], but then it would be off topic here.

> Just setting the
> transition to transform and then rotating it won't make it spin??

What? Are you too lazy to try even that yourself?

> Why do
> you have to handle all the setTimeouts etc. yourself?? 

Not neccessary at all, you don't even have to do the programming, If you get 
people on this NG idiotic enough to do your work.

But some of us like programming.
 
> ..and btw, the "transform-origin: center center; " seems to make no
> difference, at least over here.... :( 

Oh, what nonsense, 
unless you use some ancient browser like a Unix Lynx browser or so.

Will you please try my whole code, and anly then experiment when it stops to 
do what you asked for.

Anyway, such problem is off-topic, it should be asked in a CSS NG.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

Thread

Rotating on click with ANIMATION bit-naughty@hotmail.com - 2017-02-08 23:29 -0800
  Re: Rotating on click with ANIMATION John Harris <niam@jghnorth.org.uk.invalid> - 2017-02-09 09:17 +0000
  Re: Rotating on click with ANIMATION "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-09 12:12 +0100
    Re: Rotating on click with ANIMATION bit-naughty@hotmail.com - 2017-02-09 23:58 -0800
      Re: Rotating on click with ANIMATION "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-10 09:10 +0100
        Re: Rotating on click with ANIMATION "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-10 10:17 +0100
        Re: Rotating on click with ANIMATION bit-naughty@hotmail.com - 2017-02-10 01:52 -0800
          Re: Rotating on click with ANIMATION "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-10 10:59 +0100
  Re: Rotating on click with ANIMATION "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-02-09 05:56 -0800
    Re: Rotating on click with ANIMATION bit-naughty@hotmail.com - 2017-02-09 23:59 -0800
      Re: Rotating on click with ANIMATION "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-02-10 20:50 -0800
        Re: Rotating on click with ANIMATION bit-naughty@hotmail.com - 2017-02-13 04:49 -0800
          Re: Rotating on click with ANIMATION "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-02-17 16:20 -0800

csiph-web