我想在父li的悬停上实现从右到左的幻灯片动画(在本例中为Program)子ul应该动画并打开。我想在CSS中执行此操作,并且所有浏览器都支持该功能..
.child
{
transition: 1s;
position: absolute;
left: -100%;
top: 0;
padding-left: 10px;
display: none;
width: 200px;
}
我对您的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支持过渡持续时间属性
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句