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

Groups > comp.lang.javascript > #32575

Re: Rotating on click with ANIMATION

Show all headers | View raw

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

> OK, no one's responding to the last post of my earlier thread, so
> decided to post again. 
> 
> For this code:
> 
> 
>  
>  <div id=el style='width:50px;'>qwerty</div> 
>  
>  <script type='text/javascript'> 'use strict' 
>  
>  var el = document.getElementById("el"); 
>  
>  el.addEventListener("click", function(event) { 
>          el.style.transform = "rotate(45deg)"; 
>          } 
>  );         
>  
>  </script>
> 
> 
> ...I want an *animation* - on clicking it quickly changes to the rotated
> version - how do I make it *spin*? 
> 
> ...and also the center is wrong - eg. if I have the word "Hello", I'd
> like it to spin about the middle "l" - how do I do that? I tried putting
> in a DIV and then a SPAN around the "Hello", didn't work - it's in a
> couple of nested DIVs, and seems to want to spin somewhere about THOSE!!
> :( 

===================================
<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>
===================================



-- 
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