通过javascript触发CSS动画

Question

我想通过CSS动画触发javascript，反之亦然（触发CSS的Javascript）。

最终目标是使CSS动画闪烁，并使它们触发通过Web Audio API导入的音频文件。

现在，我只是想让CSS动画和Javascript相互交流。

所以..

我正在Webkit浏览器中尝试exclsivley。 下面是一个堆栈溢出线程，似乎可以解决我的问题的第一部分：如何通过JavaScript重新触发WebKit CSS动画？

但是我无法使它正常工作。

我在下面添加了我抓取/修改的代码

<!--SETUP-->
<!DOCTYPE html>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="test.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<!--END setup-->



<script src="test.js"></script>
<div id="box"> shake </div>
<div id="button"> Button </div>

CSS

#button {
    width:100px;
    height:100px;
    background:blue;
    position:absolute   

}

#box{
width:100px;
height:100px;
background:red;
position:absolute;
top:100px;
left:90%;
margin-left:100px;
-webkit-animation: shake 1.5s  steps(1)  ;
}



@-webkit-keyframes shake {
    0% {
        left: 0;
    }
    25% {
        left: 12px;
    }
    50% {
        left: 0;
    }
    75% {
        left: -12px;
    }
    100% {
        left:0;
    }
}

使用Javascript

var element = document.getElementById('box');

element.addEventListener('webkitAnimationStart', function(){
    this.style.webkitAnimationName = ''; // I think css animationName should go here...but not sure.
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // you'll probably want to preventDefault here.
};

Answer 1

而不是更改元素的样式，而是添加一个类名，并具有一个CSS声明，其中包含要在该类中使用的CSS过渡。

通过javascript触发CSS动画

问题描述

1 个解决方案

解决方案1
4 2012-08-07 20:51:40

通过javascript触发CSS动画

问题描述

1 个解决方案

解决方案1 4 2012-08-07 20:51:40

解决方案1
4 2012-08-07 20:51:40