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

Groups > comp.lang.javascript > #32491

Re: Rotating something on click

Show all headers | View raw

On 06.02.2017 08:07, bit-naughty@hotmail.com wrote:
> On Sunday, February 5, 2017 at 1:35:39 PM UTC-6, Martin Honnen wrote:
>
>> Like any CSS property, you can set the inline style of an element using
>>    element.style.propertyName
>
>
> Ah no - I want there to be an *animation*, ie, when it's clicked, it'll actually *spin around* that many degrees. In fact *this* is what I'm not clear about - how do I tell it that there'll be a *transition* FIRST and THEN the rotation (if I understand things correctly)? The "element.style.transform = 'rotate(90deg)';  " part I had pretty much already figured out.... :)

You can set the CSS
   transition-property: transform
and then the duration e.g.
   transition-duration: 2s;

<a href="#" data-angle="0" onclick="rotate(this); return false;" 
style="display: inline-block; transition-property: transform; 
transition-duration: 2s;">Hello</a>

function rotate(element) {
   element.dataset.angle =  Number(element.dataset.angle) + 90;
   element.style.transform = 'rotate(' + element.dataset.angle + 'deg)';
}

as in https://jsfiddle.net/7og9uctw/5/.

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

Thread

Rotating something on click bit-naughty@hotmail.com - 2017-02-05 10:12 -0800
  Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-05 19:16 +0100
  Re: Rotating something on click Martin Honnen <martin.honnen@gmx.de> - 2017-02-05 20:35 +0100
    Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-05 23:07 -0800
      Re: Rotating something on click Martin Honnen <martin.honnen@gmx.de> - 2017-02-06 12:05 +0100
        Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-06 23:09 -0800
          Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-06 23:15 -0800
            Re: Rotating something on click Osmo Saarikumpu <osmo@weppipakki.com> - 2017-02-07 11:09 +0200
          Re: Rotating something on click Osmo Saarikumpu <osmo@weppipakki.com> - 2017-02-07 10:40 +0200
  Re: Rotating something on click "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-02-05 13:36 -0800
    Re: Rotating something on click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-02-06 04:58 +0100
  Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-07 03:33 -0800
    Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:04 +0100
      Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:10 +0100
        Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:19 +0100
          Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:38 +0100
      Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-07 23:52 -0800

csiph-web