如何从 javascript 设置和触发 css 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11450552/
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
how to set and trigger an css transition from javascript
提问by user1520481
I'm new to html5, css and javascript, And mostly I've just been playing around. What I want to do is to set and trigger a transition of a div. After the page is loaded, I manage to do that by setting a transition. But that doesn't feel very dynamic and doesn't seem the right way to go. I am thankful for any help
我是 html5、css 和 javascript 的新手，而且大部分时间我都在玩。我想要做的是设置和触发 div 的转换。页面加载后，我设法通过设置过渡来做到这一点。但这感觉不是很有活力，而且似乎不是正确的方法。我很感激任何帮助
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
#dialPointer
{
position:relative;
margin-left: auto;
margin-right: auto;
width:23px;
height:281px;
background:url(pointer.png);
background-size:100% 100%;
background-repeat:no-repeat;
transform: rotate(-150deg);
transition-duration: 2s;
transition-delay: 2s;
-webkit-transform: rotate(-150deg);
-webkit-transition-duration:2s;
-webkit-transition-delay: 2s;
}
/* I want to call this once */
.didLoad
{
width:23px;
height:281px;
transform:rotate(110deg);
-moz-transform:rotate(110deg); /* Firefox 4 */
-webkit-transform:rotate(110deg); /* Safari and Chrome */
-o-transform:rotate(110deg); /* Opera */
}
</style>
</head>
<body>
<div id="dialPointer"></div>
<script language="javascript" type="text/javascript">
window.onload=function () {
//But instead of using rotate(110deg), I would like to call "didLoad"
document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)";
};
</script>
</body>
</html>
回答by net.uk.sweet
You can add your class to the element whenever you want to using the following JavaScript:
只要您想使用以下 JavaScript，就可以将您的类添加到元素中：
document.getElementById("dialPointer").className += " didLoad";
Or arguably better, if you want to guarantee cross-browser support, using jQuery like this:
或者可以说更好，如果你想保证跨浏览器的支持，像这样使用 jQuery：
$(function() {
// Handler for .ready() called.
$('#dialPointer').addClass('didLoad');
});
Edit:
编辑：
See fiddlehere which I've tested in Chrome and Safari on Windows. I had to comment out the transition code in the dialPointerstyle and move it to your didLoadclass. I also replaced your background image with a fill to get it to work in the fiddle.
请参阅我在 Windows 上的 Chrome 和 Safari 中测试过的小提琴。我不得不在dialPointer样式中注释掉过渡代码并将其移动到您的didLoad类中。我还用填充替换了您的背景图像，以使其在小提琴中工作。
回答by Nathan MacInnes
The way you trigger transitions is to make an element match the CSS selector. The easiest way to do that is to assign your transition to a class, then add that class using Javascript. So in your example:
触发转换的方式是使元素与 CSS 选择器匹配。最简单的方法是将您的过渡分配给一个类，然后使用 Javascript 添加该类。所以在你的例子中：
document.getElementById('dialPointer').classList.add('didLoad');
and your chosen element will animate. (I've used standards compliment Javascript for this, but it won't work on older browsers, so I'll leave it up to you to get that working).
并且您选择的元素将具有动画效果。（为此我使用了标准对 Javascript 的补充，但它不适用于较旧的浏览器，因此我将其留给您来完成）。
To get it to animate on page load, put it in a load event:
要让它在页面加载时动画，请将其放在加载事件中：
window.addEventListener('load', function () {
document.getElementById('dialPointer').classList.add('didLoad');
});
回答by Billy Moat
Maybe something like this:
也许是这样的：
document.getElementById("dialPointer").className += "didLoad";
