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

Groups > comp.lang.javascript > #32571 > unrolled thread

Rotating on click with ANIMATION

Back to article view | Back to comp.lang.javascript

Contents

  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

#32571 — Rotating on click with ANIMATION

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!! :( 

[toc] | [next] | [standalone]

#32572

On Wed, 8 Feb 2017 23:29:58 -0800 (PST), bit-naughty@hotmail.com
wrote:

  <snip>
>...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!! :( 

You want a reply so here's one.

Use GIFs. Switch between a static picture and an animated one.

  John

[toc] | [prev] | [next] | [standalone]

#32575

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)

[toc] | [prev] | [next] | [standalone]

#32584

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??!! Just setting the transition to transform and then rotating it won't make it spin?? Why do you have to handle all the setTimeouts etc. yourself??

..and btw, the "transform-origin: center center; " seems to make no difference, at least over here.... :(

[toc] | [prev] | [next] | [standalone]

#32587

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)

[toc] | [prev] | [next] | [standalone]

#32590

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 10 Feb 2017 in 
comp.lang.javascript:

> bit-naughty@hotmail.com wrote on 10 Feb 2017 in comp.lang.javascript:
>> 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.

See mom, no hands, just the mouse:

<http://hannivoort.org/test/click%20me%20to%20rotate.asp>

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

[toc] | [prev] | [next] | [standalone]

#32592

On Friday, February 10, 2017 at 2:10:35 AM UTC-6, Evertjan. wrote:

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


But why did you SAY all that stuff about setTimeout then?? Were you trying to confuse me on purpose??

[toc] | [prev] | [next] | [standalone]

#32594

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

> On Friday, February 10, 2017 at 2:10:35 AM UTC-6, Evertjan. wrote:
> 
>> 
>> What? Are you too lazy to try even that yourself?
> 
> 
> But why did you SAY all that stuff about setTimeout then?? Were you
> trying to confuse me on purpose?? 

No, never meant that, but now you bring it up, it is a nice idea.
Confusing you might be instrumental to your learning to analize by yourself.

;-)

So what about the swinging example I just posted:

<http://hannivoort.org/test/click%20me%20to%20rotate.asp>



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

[toc] | [prev] | [next] | [standalone]

#32579

bit-n...@hotmail.com wrote:

> ...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!! :(

Like this?

<http://codepen.io/mlhaufe/pen/NdOyqo>

You can move the animation properties to a separate class that get assigned onclick by JS.

[toc] | [prev] | [next] | [standalone]

#32585

On Thursday, February 9, 2017 at 7:56:40 AM UTC-6, Michael Haufe (TNO) wrote:

> You can move the animation properties to a separate class that get assigned onclick by JS.

Could you please give some example code? I find it a little hard to visualise....

[toc] | [prev] | [next] | [standalone]

#32607

bit-n...@hotmail.com wrote:
Michael Haufe (TNO) wrote:
> 
> > You can move the animation properties to a separate class that get assigned onclick by JS.
> 
> Could you please give some example code? I find it a little hard to visualise....

Original link updated: <http://codepen.io/mlhaufe/pen/NdOyqo>

Lazily copied details:

<style>
#foo{
  position:relative;
  display: inline-block;
  cursor: pointer;
  border: 1px solid black;
  padding: 0 1em;
}

.rotater {
  animation-name: rotate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(364deg);
  }
}
</style>

<div id='foo'>Hello</div>

<script>
  var foo = document.getElementById('foo')
  foo.addEventListener('click', function(e){
    foo.classList.toggle('rotater')
  })
</script>

[toc] | [prev] | [next] | [standalone]

#32620

On Friday, February 10, 2017 at 10:50:36 PM UTC-6, Michael Haufe (TNO) wrote:

> Lazily copied details:
> 
> <style>
> #foo{
>   position:relative;
>   display: inline-block;
>   cursor: pointer;
>   border: 1px solid black;
>   padding: 0 1em;
> }
> 
> .rotater {
>   animation-name: rotate;
>   animation-duration: 3s;
>   animation-iteration-count: infinite;
> }
> 
> @keyframes rotate {
>   from {
>     transform: rotate(0deg);
>   }
>   to {
>     transform: rotate(364deg);
>   }
> }
> </style>
> 
> <div id='foo'>Hello</div>
> 
> <script>
>   var foo = document.getElementById('foo')
>   foo.addEventListener('click', function(e){
>     foo.classList.toggle('rotater')
>   })
> </script>

Sorry - I'm a little confused - the DIV has an id AND a class??!! Why would you do that??
(Is it possible to have one class just normal, and one class with the animation, and turn the 2nd one on?)


...what is "classList" exactly, and how does it differ from className? Why did you choose IT?
and "toggle" - um...is that like, a CSS property or something?? (scratches head :) )

[toc] | [prev] | [next] | [standalone]

#32642

bit-n...@hotmail.com wrote:

> Sorry - I'm a little confused - the DIV has an id AND a class??!! Why would you do that??

An ID is a unique identifier for the element [1]

A CLASS is a more generic categorization [2]

Why have both? With the id, the element specific styles can be applied and the animation specific properties kept separate and applied to other elements just as easily. The Separation of Concerns principle [3]

> (Is it possible to have one class just normal, and one class with the animation, and turn the 2nd one on?)

yes, by toggling both using similar to my approach earlier

> ...what is "classList" exactly, and how does it differ from className? Why did you choose IT?
> and "toggle" - um...is that like, a CSS property or something?? (scratches head :) )

Read the documentation on MDN and elsewhere [4]

[1] <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id>
[2] <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class>
[3] <https://en.wikipedia.org/wiki/Separation_of_concerns#Origin>
[4] <https://developer.mozilla.org/en-US/docs/Web/API/Element/classList>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web