使用 Javascript 进行 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6193756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition with Javascript
提问by Johnydep
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??
现在是否可以使用 JavaScript 而不是默认悬停功能触发此转换。我尝试创建两个不同的类名，但即使我通过添加延迟和更改类来实现，它也不起作用。反正有没有用 Javascript 做这样的转换？
回答by profMobi
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 更改为使用 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>
回答by atlavis
Do not use :hoverselector then. Use JavaScript events.
:hover然后不要使用选择器。使用 JavaScript 事件。
for example:
例如：
CSS:
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:
JavaScript：
var element = document . getElementById ( "box" ) ;
element . addEventListener
(
"click",
function ()
{
this . style . width = "200px" ;
}
) ;
element . addEventListener
(
"dblclick",
function ()
{
this . style . height = "200px" ;
}
) ;
回答by Ryan Florence
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.
您可以使用CSSAnimation，这是一个 JavaScript 库，允许您在使用 CSS 执行实际动画的同时使用 JavaScript 触发动画。
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);
回答by jakubmal
what do you think about this: http://jsfiddle.net/scrRe/?
你怎么看这个：http: //jsfiddle.net/scrRe/？
Here you go: http://jsfiddle.net/scrRe/3/
