问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

原文由 user1520481 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptcsscss-transitions
阅读 448
1 个回答
得票最新
社区维基
1

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

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

并且您选择的元素将具有动画效果。 （我为此使用了标准的 Javascript 补充，但它不适用于旧版浏览器，所以我会把它留给你来让它工作）。

要让它在页面加载时显示动画，请将其放入加载事件中：

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

原文由 Nathan MacInnes 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题