1

我想在父li悬停时实现从右到左的滑动动画（在这种情况下为程序）子ul应该动画并打开。我想在 css 中完成它，并且所有浏览器都支持它..

   .child
   {
    transition: 1s;
    position: absolute;
    left: -100%;
    top: 0;
    padding-left: 10px;
    display: none;
    width: 200px;
   }

我的演示

4

2 回答 2

2

试试 JSFiddle

http://jsfiddle.net/2vLjU/50/

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}
于 2013-08-02T12:09:58.600 回答
2

我稍微改变了你的 CSS。这不是完整的解决方案。你将不得不玩一点来完善它。但我认为它几乎接近你想要实现的目标。

工作演示

我只会添加我更改的 CSS。

.menu-1990:hover > .child {
    display:block;
    opacity:1;
    margin-left:60px;
    height:auto;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;

}
.child {
    transition: 1s;
    margin-left:0px;
    opacity:0;    
    height: 0;
    padding-left: 0px;
    display: block;
    width: 200px;   

}

编辑：就像我在评论中提到的那样，此解决方案仅适用于 IE 以外的所有浏览器。只有 IE10 支持 transition-duration 属性

于 2013-08-02T12:45:21.490 回答