1 Replies - 919 Views - Last Post: 21 October 2012 - 01:28 AM

#1 njgmoorman   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 02-October 12

Have CSS do something when a javascript function is called

Posted 20 October 2012 - 09:05 PM

Let's say I've got some javascript

function someFunction(){
document.write("hi");
}



and some css

div {
-webkit-transform: rotateY(360deg);
}



with this HTML

<div bgcolor="red">
some stuff in a div
</div>
<input type="button" value="click" onclick="someFunction();" />



I want the CSS to do that rotation when the javascript function is called. (I know what I need to make it actually show the animation happening.)

Is This A Good Question/Topic? 0
  • +

Replies To: Have CSS do something when a javascript function is called

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4278
  • View blog
  • Posts: 13,573
  • Joined: 08-June 10

Re: Have CSS do something when a javascript function is called

Posted 21 October 2012 - 01:28 AM

it doesn’t work that way. CSS is a static layout language, so the concept of "do something if something else happens" is unknown. the best approximation thereof is a change of states (cf. pseudo-classes like :hover), but they "trigger" when a certain state occurs.

so the best thing you can do is make the JS function create a state (e.g. adding a class) which has the CSS animation.
<div id="test">some stuff</div>

.rotate {
    -webkit-transform: rotateY(360deg);
}

window.setTimeout(function() {
    document.getElementById("test").className = "rotate";
}, 2000);

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1