今晚在复习事件的时候,看到这个事件,就想写写看,感觉硬显太硬,于是自己加了点动画,这个过程中,也额外收获了些知识。使用js(在一段代码中)“连续”设置节点的style中同一属性,那么属性上的动画是来不及触发的,它并不会排队依次把动画执行完,视觉上就像直接跳过了动画,所以在代码中我使用了定时器,下面是demo代码。
<!DOCTYPE html>
<html>
<head>
<title>temp</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
div.box{
display: none;
width: 0px;
background-color: yellow;
text-align: center;
overflow: hidden;
transition: width 0.2s;
-webkit-transition: width 0.2s;
}
div.box ul{
padding: 0;
margin: 0;
}
div.box li{
display: block;
list-style: none;
border: 1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="javascript:void(0);">menu001</a></li>
<li><a href="javascript:void(0);">menu002</a></li>
<li><a href="javascript:void(0);">menu003</a></li>
<li><a href="javascript:void(0);">menu004</a></li>
<li><a href="javascript:void(0);">menu005</a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
document.body.addEventListener("contextmenu",function(event){
var div = document.getElementsByClassName("box")[0];
event.preventDefault? event.preventDefault() : window.event.returnValue = false;
var pointx = event.clientX;
var pointy = event.clientY;
div.style.position = "fixed";
div.style.top = pointy+"px";
div.style.left = pointx+"px";
div.style.width = "0px";
div.style.display = "block";
setTimeout(function(){
div.style.width = "100px";
},100);
});
window.addEventListener("click",function(event){
var div = document.getElementsByClassName("box")[0];
div.style.display = "none";
});
};
</script>
</body>
</html>