css - CSS3 div 在悬停时移动而不是缓出

Question

好的，伙计们，问题来了：我用三个菜单项制作了这个简单的菜单，并且每次将鼠标悬停在它上面时，我都想将每个 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;
}

我究竟做错了什么？有没有办法解决它？

提前致谢

Answer 1

这是因为 div 仅position: relative处于悬停状态，无法设置动画。left切换回 时，动画效果会丢失position: static。只需添加position: relative到未悬停的样式。

http://jsfiddle.net/Pre5p/

Answer 2

根据您的浏览器对动画的支持，您应该使用 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); 
}