CSS:向左滑动动画/过渡而无需jquery

Vaibs_Cool

我想在父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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章