如何从javascript设置和触发css转换_Javascript_Css_Css Transitions

如何从javascript设置和触发css转换

javascript css

如何从javascript设置和触发css转换,javascript,css,css-transitions,Javascript,Css,Css Transitions,我是html5、css和javascript的新手，大部分时间我只是在玩。我想做的是设置并触发一个div的转换。加载页面后，我通过设置一个转换来实现这一点。但这感觉不是很有活力，而且似乎不是正确的方式。我感谢你的帮助 <!DOCTYPE html> <html> <head> <style> body{ text-align: center; } #dial

我是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>


身体{
文本对齐：居中；
}
#拨号指针
{
位置：相对位置；
左边距：自动；
右边距：自动；
宽度：23px；
高度：281px；
背景：url（pointer.png）；
背景大小：100%100%；
背景重复：无重复；
变换：旋转（-150度）；
过渡时间：2s；
过渡延迟：2s；
-webkit变换：旋转（-150度）；
-webkit转换持续时间：2s；
-webkit转换延迟：2s；
}
/*我想打一次电话*/
迪德洛德先生
{
宽度：23px；
高度：281px；
变换：旋转（110度）；
-moz变换：旋转（110度）；/*4*/
-webkit变换：旋转（110度）；/*Safari和Chrome*/
-o变换：旋转（110度）；/*Opera*/
}
window.onload=函数（）{
//但我不想使用旋转（110度），我想称之为“didLoad”
document.getElementById（“拨号指针”）.style.webkittTransform=“旋转（110度）”；
};

可能是这样的：

document.getElementById("dialPointer").className += "didLoad";

您可以随时使用以下JavaScript将类添加到元素中：

document.getElementById("dialPointer").className += " didLoad";

如果您想保证跨浏览器支持，可以这样使用jQuery：

$(function() {
 // Handler for .ready() called.
 $('#dialPointer').addClass('didLoad');
});

编辑：

看看这里，我已经在Windows上的Chrome和Safari中测试过了。我不得不在

dialPointer

样式中注释掉转换代码，并将其移动到您的

didLoad

类中。我还用填充物替换了你的背景图像，让它在小提琴中工作

触发转换的方法是使元素与CSS选择器匹配。最简单的方法是将转换分配给一个类，然后使用Javascript添加该类。在你的例子中：

document.getElementById('dialPointer').classList.add('didLoad');

你所选择的元素将产生动画。（我使用了标准的Javascript来实现这一点，但它在较旧的浏览器上不起作用，所以我将让您自己来实现这一点）

要使其在页面加载时设置动画，请将其放入加载事件中：

window.addEventListener('load', function () {
    document.getElementById('dialPointer').classList.add('didLoad');
});

添加类时，字符串的开头需要一个空格，否则如果已经有另一个类，它将无法工作。啊哈！美好的如果div已经旋转了，它就不能转换了吗？看起来你可以将它旋转到你最初想要的点，然后只要在类中设置了初始旋转，就可以设置旋转的动画：你想对类didLoad说什么？您想要实现它还是转换它？在javascript中，你不能“调用”一个html类…？好的，所以我想做的是让我的div带有一个背景img，在加载页面后旋转。但奇怪的是，我不得不宣布身体的转变。因此，我希望在我的div上触发一个已经声明的转换。另外，我正在使用safari浏览器。感谢您的响应，我尝试替换document.getElementById（“dialPointer”）.style.webkittTransform=“rotate（110deg）”；使用document.getElementById（'dialPointer'）.classList.add（'didLoad'）；但是什么也没发生，可能是因为我在使用safari？我以为我已经分配了一个类didLoad的转换。否则你能告诉我怎么做吗？谢谢你的回复！虽然当我用你的代码替换我的代码行时，什么也没有发生。有什么想法吗？我在safari web浏览器上检查调试控制台是否有错误。您是否在onLoad函数中添加了该行？没有错误，我正在使用safari的web检查器和错误控制台。是的，我只替换了document.getElementById（“dialPointer”）.style.webkitttransform=“旋转（110度）”；使用document.getElementById（“dialPointer”）.className+=“didLoad”；