Question

我希望在父li的悬停时从右到左动画实现幻灯片（在这种情况下是程序）子ul应该动画并打开。我想在css中做到这一点，并支持所有浏览器..

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

My demo

Answer 1

试试JSFiddle

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

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

Answer 2

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

WORKING DEMO

我只会添加我更改的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属性

CSS：在没有jquery的情况下向左滑动动画/过渡

2 个答案: