为了账号安全,请及时绑定邮箱和手机立即绑定

元素改变两个不同的属性,元素css上有transition,WebkitTransitionEnd写

元素改变两个不同的属性,元素css上有transition,WebkitTransitionEnd写

慕桂英4014372 2018-12-19 18:19:58
<!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>
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 469 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信