javascript - 每次调用 JavaScript 函数时启动 CSS 动画？

Question

我正在尝试让 CSS3 动画在每次调用函数时进行动画处理。

我的动画 CSS 代码在一个名为“启用”的类中，它只是启动动画。

我的函数代码如下:

document.getElementById("red").className = "enable";
    setTimeout(function() {
    document.getElementById("red").className = "";
}, 1000);

当使用 setTimeout 函数时它工作正常，但是当我将整个 FUNCTIONS 代码更改为如下所示时:

document.getElementById("red").className = "";
document.getElementById("red").className = "enable";

它只能一次。

为什么我不能删除类然后立即添加它。为什么我的第二个代码做的事情与第一个代码不一样？

提前致谢!

Answer 1

如果包含您的 html/css 可能会有所帮助。

您必须使用 setTimeout，否则浏览器无法足够快地获取更改。由于 javascript 在单线程中运行，因此浏览器需要一些喘息时间来对类中的更改使用react。

这是一个例子:http://jsfiddle.net/brendonparker/75TfR

<!-- CSS -->
<style>
    #mydiv {
        -webkit-transition: all ease 1s;
        transition: all ease 1s;
    }

    #mydiv.enabled {
        background: red;
    }
</style>

<!-- HTML -->
<div id="mydiv" >
    <p>Hello World</p>
    <p>Test</p>
</div>

<!-- JS -->
<script>

    function animate(){
        var d = document.getElementById('mydiv');
        d.className = 'enabled';
        setTimeout(function(){ 
            d.className = '';
        }, 1000);
    }    

    animate();

</script>