<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:1s width,2s height;}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function()
{
this.style.width=this.offsetWidth+100+"px";
this.style.height=this.offsetHeight+100+"px";
};
addEnd(oBox,function(){//----》问题1：教程里面说是有两次结束transition，所以会弹出两次，但是js不是按照顺序结构执行代码的吗？这里函数只调用了一次啊？
alert("end");
});
function addEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);//--》问题2：这里为什么不需要加判断是否能读取WebkitTransitionEnd，要是非chrome浏览器读取不了WebkitTransitionEnd，下面的代码应该不会执行才对啊，但是ie，ff都能执行，这是什么原因？
obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
</html>
相关分类