延时解决slideup和锚点定位冲突demo
<meta charset="utf-8">
http://www.zhangxinxu.com/study/201308/anchor-and-div-show-slideup-fixed.html#one
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锚点与内容动画向上显示效果-修复版</title>
<style type="text/css">
@-webkit-keyframes slideupin {
0% {-webkit-transform: translateY(100%);}
100% { -webkit-transform: translateY(0%);}
}
@keyframes slideupin {
0% {transform: translateY(100%); }
100% { transform: translateY(0%);}
}
.box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden; position:relative;}
.list{width:200px; height:100px; line-height:100px; background:#ddd; font-size:80px; text-align:center; position:absolute;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform .35s .05s linear;
transition: transform .35s .05s linear;
}
.list:target {
z-index: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-animation: slideupin .35s .05s linear forwards;
animation: slideupin .35s .05s linear forwards;
}
.link{width:200px; padding-top:10px; text-align:right;}
.click{display:inline-block; width:20px; height:20px; line-height:20px; border:1px solid #ccc; background:#f7f7f7; color:#333; font-size:12px; font-weight:bold; text-align:center; text-decoration:none;}
.click:hover{background:#eee; color:#345;}
</style>
</head>
<body>
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="link">
<a class="click" href="#one">1</a>
<a class="click" href="#two">2</a>
<a class="click" href="#three">3</a>
<a class="click" href="#four">4</a>
</div>
</body>
</html>
