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

Question

I'm new to html5, css and javascript, And mostly I've just been playing around.我是 html5、css 和 javascript 的新手，大部分时间我只是在玩。 What I want to do is to set and trigger a transition of a div.我想要做的是设置并触发一个 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但这感觉不是很有活力，而且似乎不是通往 go 的正确方式。我感谢您的帮助

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

Answer 1

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 fiddle here which I've tested in Chrome and Safari on Windows. 请参阅此处的小提琴，我在Windows上的Chrome和Safari中进行了测试。 I had to comment out the transition code in the dialPointer style and move it to your didLoad class. 我必须在dialPointer样式中注释转换代码并将其移动到didLoad类。 I also replaced your background image with a fill to get it to work in the fiddle. 我还用填充替换了你的背景图像，让它在小提琴中起作用。

Answer 2

The way you trigger transitions is to make an element match the CSS selector. 触发转换的方式是使元素与CSS选择器匹配。 The easiest way to do that is to assign your transition to a class, then add that class using Javascript. 最简单的方法是将转换分配给类，然后使用Javascript添加该类。 So in your example: 所以在你的例子中：

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');
});

Answer 3

也许是这样的：

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

Answer 4

To trigger a transition you don't really need a class to toggle.要触发转换，您实际上并不需要一个类来切换。 This is important since you may not prefer to set up classes dynamically for each next animation to toggle beforehand.这很重要，因为您可能不喜欢为每个要预先切换的下一个动画动态设置类。 In other words to trigger the transition just altering the relevant CSS attribute values should be much simpler.换句话说，仅仅改变相关的 CSS 属性值来触发转换应该简单得多。 However yes... you need to satisfy the followings;但是，是的……您需要满足以下条件；

In order your <div id="blue"></div> element to animate, it must carry the std class where the transition and relevant attribute is defined ( opacity in the following example).为了使您的<div id="blue"></div>元素具有动画效果，它必须携带定义了transition和相关属性的std类（以下示例中为opacity ）。 So first we should do like blue.classList.add("std");所以首先我们应该像blue.classList.add("std");
You need to perform the task asynchronously.您需要异步执行任务。 Refreshing the DOM asynchronously is best done by the requestAnimationFrame() function.异步刷新 DOM 最好由requestAnimationFrame()函数完成。

 var blue = document.getElementById("blue"); blue.classList.add("std"); blue.style.backgroundColor = "blue"; blue.style.opacity = 0; document.querySelector('button') .addEventListener( 'click' , _ => requestAnimationFrame(_ => blue.style.opacity = 1) );

 .std { width:100px; height:100px; opacity: 1; transition: opacity 5s; } .std--red { background-color: red;}

 <button>click here</button> <div class='std std--red'></div> <div id="blue"></div>

Answer 5

Here is a little demo这是一个小演示

 <style> div { background-color: red; transition: all 1000ms linear; }.didLoad { background-color: gold; transition: all 1000ms linear; } </style> <div onclick="this.classList.toggle('didLoad');">click to animate background-color</div>

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

问题描述

4 个解决方案

解决方案1
4 2012-07-12 11:16:44

解决方案2
3 2012-07-12 11:25:21

解决方案3
0 2012-07-12 11:16:23

解决方案4
0 2021-12-18 19:09:00

解决方案5
0 2022-10-07 07:23:48

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

问题描述

4 个解决方案

解决方案1 4 2012-07-12 11:16:44

解决方案2 3 2012-07-12 11:25:21

解决方案3 0 2012-07-12 11:16:23

解决方案4 0 2021-12-18 19:09:00

解决方案5 0 2022-10-07 07:23:48

解决方案1
4 2012-07-12 11:16:44

解决方案2
3 2012-07-12 11:25:21

解决方案3
0 2012-07-12 11:16:23

解决方案4
0 2021-12-18 19:09:00

解决方案5
0 2022-10-07 07:23:48