好的,这就是问题:我用三个菜单项制作了这个简单的菜单,我希望每次将鼠标悬停在它上面时将每个div移动到右边(简单,对吧?不幸的是不是......)
虽然它可以轻松制作动画,但它根本不会放松,结果不是流畅的,而是块状的,而且根本不冷静。
我也在线搜索了StackOverflow,并应用了所有修复/建议,但我无法让它工作。
这是代码(例如,尝试在jsFiddle上)
HTML:
<div id="menu-container">
<div class="menu1">Menu 01</div>
<div class="menu2">Menu 02</div>
<div class="menu3">Menu 03</div>
</div>
CSS:
#menu-container div{
height: 30px;
width: 200px;
border:1px solid #999;
background-color:#222;
color:#ccc;
left: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#menu-container div:hover{
position: relative;
color:#fff;
background-color:#333333;
left: 20px;
padding-left: -20px;
}
#menu-container div.menu1:hover{
border-color: red;
}
#menu-container div.menu2:hover{
border-color: blue;
}
#menu-container div.menu3:hover{
border-color: green;
}
我做错了什么?有办法解决吗?
提前致谢
答案 0 :(得分:5)
这是因为悬停时div只有position: relative
,这是不可动画的。切换回left
时,position: static
上的动画效果会丢失。只需将position: relative
添加到无悬停的样式。
答案 1 :(得分:4)
根据您对该动画的浏览器支持,您应该使用transform:translate。你得到一个更平滑的动画......
#menu-container div:hover{
color:#fff;
background-color:#333333;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}