极客观点
项目管理
HarmonyOS
<!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>
元素改变两个不同的属性，元素css上有transition，WebkitTransitionEnd写的弹出函数会执行两次的原因？
阅读 2.6k
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}13 回答12.8k 阅读
Next.js做纯前端是否可行？
最近在学习Next.js存在一个疑问，如果只需要做前端界面的渲染和交互后端逻辑都用java来做，是否还需要使用Next.js，还是说直接使用React+Tailwind css更好7 回答1.9k 阅读
如何实现一个深拷贝函数？
在项目开发中，如何实现一个深拷贝函数？3 回答1.1k 阅读✓ 已解决
git提交记录问题？
"git add .“添加了所有文件.这样导致了项目里每一行代码的修改记录都变成了这次的提交备注"update gitignore"。后续其他同事也提交了几次记录。想着回滚回这次修改以前的，再让同事们重新提交自己的修改。但同事们已经pull过代码，可能也区分不出来了。 有什么方法删除掉gitignore的这次提交，并保留同事们后续的提交？2 回答1.2k 阅读✓ 已解决
怎么获取动态弹出对话框的模拟单击？
我在用js实现自动化刷课脚本的时候，要处理一个“继续学习”弹出对话框，才能播放。使用document.queryselctor('.continue')获取不到，好像也没有click事件;6 回答873 阅读✓ 已解决
什么是闭包？闭包有哪些应用场景？
什么是闭包？闭包有哪些应用场景？6 回答1k 阅读
求一个能输入需求就可以写出代码的网站，支持一键部署？
求一个网站，生成准确率高2 回答1.3k 阅读✓ 已解决
问题1：在你点击了div后，执行onclick函数，div宽、高各增加100px;这里宽和高算两次变形。onclick确实是只调用了一次它的点击事件。但是你在下面的代码监听了transitionend事件类型，两次变形结束触发两次transitionend事件，所以弹出两次弹框，没毛病。。。
问题2：addEventListener只是注册了事件。如果这个事件没被触发，就不会执行里面的函数。也就是说你即使这样
WebkitTransitionEnd是兼容以前的老浏览器。现代浏览器都是使用transitionend。WebkitTransitionEnd只有在Chrome 1.0, Android 2.1 与 WebKit 3.2上才存在，所以你在现在的浏览器上使用时，
obj.addEventListener('WebkitTransitionEnd',fn,false)//这个事件不会触发。真正触发的都是transitionend事件。