CSS3 transition with Javascript

Question

i have this Webpage on which with mouse over, the element rotates and goes back to original position on mouseout.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Now Is it possible to trigger this transition using JavaScript and not the defualt hover function. I tried by creating two different class names but it just dosent work even if i do it by adding delay and changing the class. Is there anyway to do such a transition with Javascript??

profMobi · Accepted Answer · 2011-05-31 21:47:27Z

3

I believe all you need to do is fire a change the style of the element you want to modify when particular events happen. Also, I changed the DOCTYPE to use HTML5. Give this a try:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
div.sample1
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div.sample1:hover
{
width:300px;
}


</style>
<script type="text/javascript">
function doStuff(obj,boolStateChange)
{
    console.log('test');
    if (boolStateChange==true)
    {
    obj.style.cssText = "width:300px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";

    }
    else
    {
    obj.style.cssText = "width:100px;height:100px;background:green;transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;";
    }

}
</script>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div class="sample1"></div>

<p>Hover over the div element above, to see the transition effect.</p>

<br/><br/><br/>

<div id="javaHover" style="background-color:green;width:100px;height:100px;" onMouseOver="doStuff(this,true);" onMouseOut="doStuff(this,false);"></div>

<p>Hover over the div element above, to see the Javascript transition effect.</p>

</body>
</html>

answered May 31, 2011 at 21:47

profMobi

7794 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Johnydep Over a year ago

you are a champion. Thank you a bazillion times, thank you so so much!!

melhosseiny · Accepted Answer · 2011-05-31 21:42:27Z

1

You can do this:

document.getElementsByTagName("div")[0].style.width = '300px';

See fiddle.

answered May 31, 2011 at 21:42

melhosseiny

10.2k6 gold badges34 silver badges48 bronze badges

Comments

jakubmal · Accepted Answer · 2011-05-31 21:48:02Z

1

what do you think about this: http://jsfiddle.net/scrRe/ ?

Here you go: http://jsfiddle.net/scrRe/3/

edited May 31, 2011 at 21:48

answered May 31, 2011 at 21:31

jakubmal

2222 silver badges9 bronze badges

1 Comment

Johnydep Over a year ago

yes but is there anyway to avoid jQuery, Im sure it must be simple. I may be missing something. I just need to change the CSS from hover and call it from some javascript function but what is it exactly what i am missing??

RobertO · Accepted Answer · 2011-05-31 22:05:42Z

1

Do not use :hover selector then. Use JavaScript events.

for example:

CSS:

#box
{
  background-color: steelblue;
  height: 100px;
  width: 100px;
  transition: height 1s, width 1s;
  -moz-transition: height 1s, width 1s;
  -webkit-transition: height 1s, width 1s; 
  -o-transition: height 1s, width 1s;
}

JavaScript:

 var element = document . getElementById ( "box" ) ;


 element . addEventListener
 (
     "click",
     function ()
     {
         this . style . width = "200px" ;
     }
 ) ;

 element . addEventListener
 (
    "dblclick",
     function ()
     {
         this . style . height = "200px" ;
     }
 ) ;

http://jsfiddle.net/6gSZD/

edited May 31, 2011 at 22:05

answered May 31, 2011 at 22:00

RobertO

2,6731 gold badge21 silver badges18 bronze badges

Comments

icktoofay · Accepted Answer · 2012-08-12 01:08:53Z

1

You may be able to use CSSAnimation, which is a JavaScript library that allows you to trigger animations with JavaScript while utilizing CSS to do the actual animation.

Here's an example from the documentation (try it):

var element = document.getElementById('some-el'),
    transition = new Transition(element),
    transform = new Transform(element);

transition.set({
  property: 'transform',
  'timing-function': 'ease-in',
  duration: '2s'
});

transform.rotate(720).scale(2);

edited Aug 12, 2012 at 1:08

icktoofay

130k23 gold badges261 silver badges239 bronze badges

answered Jun 1, 2011 at 2:34

Ryan Florence

13.5k9 gold badges48 silver badges63 bronze badges

Collectives™ on Stack Overflow

CSS3 transition with Javascript

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related