哪位高手帮小弟我看看webkitAnimationEnd 事件为什么会执行2次
谁帮我看看webkitAnimationEnd 事件为什么会执行2次？
谁帮我看看webkitAnimationEnd 事件为什么会执行2次？我明明是绑定在 .ddd 的div里的 。。难道里面的子元素也会继承父的webkitAnimationEnd 事件？ 怎么让它执行一次?
------解决思路----------------------
组织.ccc事件的冒泡，加个代码
------解决思路----------------------
兄弟 你试了吗？
谁帮我看看webkitAnimationEnd 事件为什么会执行2次？我明明是绑定在 .ddd 的div里的 。。难道里面的子元素也会继承父的webkitAnimationEnd 事件？ 怎么让它执行一次?
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.js"></script>
<style type="text/css">
*{margin: 0;padding:0;}
.ddd{
-webkit-animation: moveToBottom .3s ease both;
animation: moveToBottom .3s ease both;
width: 300px;
height: 300px;
background: red;
}
@-webkit-keyframes moveToBottom {
from {
}to {
-webkit-transform:translateY(100%);
}
}
@keyframes moveToBottom {
from {
}to {
-webkit-transform:translateY(100%);
transform:translateY(100%);
}
}
.ccc{
-webkit-animation:moveLeft .3s ease 1s;
animation:moveLeft .3s ease 1s;
width: 100px;
height: 100px;
background: blue;
}
@keyframes moveLeft {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes moveLeft {
0% {
-webkit-transform: translateX(150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
</style>
</head>
<body>
<div class="ddd">
<div class="ccc"></div>
</div>
<script type="text/javascript">
$(".ddd").on("webkitAnimationEnd",function(event){
event.stopPropagation();
alert("sdsdsds")
})
</script>
</body>
</html>
------解决思路----------------------
组织.ccc事件的冒泡，加个代码
$(".ccc").on("webkitAnimationEnd",function(event){
event.stopPropagation();
})
------解决思路----------------------
兄弟 你试了吗？