Question

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

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

现在我只想制作CSS动画和Javascript互相交流。

所以..

我正在试验Webkit浏览器中的exclusivley。下面是一个堆栈溢出线程，似乎回答了我的问题的第一部分： How do I re-trigger a WebKit CSS animation via JavaScript?

但是我不能让它发挥作用。

我添加了我在下面编辑/修改的代码

<!--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 个答案: