CSS：滑动左边的动画/没有jquery的转换

问题描述：

我想从右到左滑动动画，在父li上悬停（程序在这种情况下）子ul应该动画和打开。我想这样做在CSS和支持所有浏览器..CSS：滑动左边的动画/没有jquery的转换

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

My demo

所有浏览器的意思是IE8及以下版本。因为ie8不支持css3 – AnaMaria

@AnaMaria在IE9中不支持（iirc） – xec

是的，我谈论的是现代浏览器..我暂时不在乎IE12的问题 –

答

我改变你的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属性

该死的，这是完美的答案。 –

@ Anurag-Sharma，感谢致意 – AnaMaria

感谢安娜其工作真棒... –

答

尝试的jsfiddle

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

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

我看到这个例子，但在我的情况下，我没有固定的高度宽度的div如该例所示.. does not working for me .. –

@ user1145009如果您对您的问题有其他要求，如没有'div'或固定尺寸，你应该将这些细节添加到你的问题。 – shanabus

CSS：滑动左边的动画/没有jquery的转换

相关推荐