使用Javascript的CSS3過渡

我有這個網頁上的鼠標懸停，元素旋轉，並返回到mouseout原來的位置。使用Javascript的CSS3過渡

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

現在是否可以使用JavaScript觸發此轉換而不是使用defualt懸停功能。我嘗試創建兩個不同的類名，但即使我通過添加延遲和更改類來完成它也是可行的。無論如何，用Javascript做這樣的轉換？

來源

2011-05-31 Johnydep

我相信你所需要做的就是在特定事件發生時觸發你想要修改的元素的風格。另外，我將DOCTYPE更改爲使用HTML5。試試這個：

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

來源

2011-05-31 21:47:27 profMobi

你是冠軍。謝謝bazillion次，非常感謝你！ – Johnydep 2011-05-31 21:53:13

您對此有何看法： http://jsfiddle.net/scrRe/？

在這裏你去： http://jsfiddle.net/scrRe/3/

來源

2011-05-31 21:31:48 jakubmal

肯定的，但反正是有避免jQuery的，我敢肯定那一定是簡單的。我可能會錯過一些東西。我只需要改變懸停的CSS，並從一些JavaScript函數調用它，但它究竟是什麼，我錯過了？ – Johnydep 2011-05-31 21:33:41

你可以這樣做：

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

見fiddle。

來源

2011-05-31 21:42:27 melhosseiny

請不要使用:hover選擇器。使用JavaScript事件。

例如：

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/

來源

2011-05-31 22:00:41 atlavis

您可以使用CSSAnimation，這是一個JavaScript庫，它允許你用JavaScript whi觸發動畫利用CSS來做實際的動畫。

下面是從文檔（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);

來源

2011-06-01 02:34:54

使用Javascript的CSS3過渡

回答

相關問題