CODEWITHSUNDEEP
javascripthtmlcss
Johnydep
Johnydep

Reputation: 6277

CSS3 transition with Javascript

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

Upvotes: 2

Views: 21328

Answers (5)

Ryan Florence
Ryan Florence

Reputation: 13483

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

Upvotes: 1

RobertO
RobertO

Reputation: 2663

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/

Upvotes: 1

jakubmal
jakubmal

Reputation: 222

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

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

Upvotes: 1

profMobi
profMobi

Reputation: 779

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>

Upvotes: 3

melhosseiny
melhosseiny

Reputation: 10144

You can do this:

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

See fiddle.

Upvotes: 1

Related Questions