Question

每次调用函数时，我都会尝试将CSS3动画设置为动画。

我的动画CSS代码位于一个名为'enable'的类中，它只是启动动画。

我的功能代码如下：

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在单个线程中运行，因此浏览器需要一些喘息时间来对类中的更改做出反应。

以下是一个示例：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>

每次调用JavaScript函数时都会启动CSS动画？

1 个答案: