0

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

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

现在我只是对制作 CSS 动画和 Javascript 相互交流感兴趣。

所以..

我正在 Webkit 浏览器中进行独家试验。下面是一个堆栈溢出线程，它似乎回答了我的问题的第一部分： 如何通过 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.
};
4

1 回答 1

5

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

于 2012-08-07T20:51:40.867 回答