Question

Here是我的JSFiddle。我要做的是在两个无序列表之间产生过渡效果。点击商店后，它会转到子菜单。当您单击子菜单上的商店时，它会返回主菜单。为什么不滑动或有任何影响？我的目标是从右向左转换子菜单，并从左到右进行主菜单转换。我怎样才能做到这一点？

<div class="mobile-nav">
    <ul class="main-mobile-menu transition">
        <li class="has-submenu"><a href="#" title="SHOP" data-menu-id="shop">SHOP</a></li>
        <li class="has-submenu"><a href="#" title="BRANDS" data-menu-id="brands">BRANDS</a></li>
        <li><a href="#" title="ABOUT" >ABOUT</a></li>
        <li><a href="#" title="CONTACT" >CONTACT</a></li>
    </ul>
    <ul id="shop-submenu" class="hide transition">
        <li><a href="#" title="SHOP" data-menu-id="main-mobile-menu">SHOP</a></li>
        <li class="has-submenu"><a href="#" title="ACCESSORIES" data-menu-id="accessories">ACCESSORIES</a></li>
        <li class="has-submenu"><a href="#" title="ART" data-menu-id="art">ART</a></li>
        <li class="has-submenu"><a href="#" title="WOMENS" data-menu-id="womens">WOMENS</a></li>
        <li class="has-submenu"><a href="#" title="MENS" data-menu-id="mens">MENS</a></li>
        <li class="has-submenu"><a href="#" title="SHOES" data-menu-id="shoes">SHOES</a></li>
        <li><a href="#" title="GIFT CERTIFICATE">GIFT CERTIFICATE</a></li>
    </ul>
</div>

这是我的CSS：

.mobile-nav{
    position: absolute;
    height: 100%;
    padding: 0px;
    left: 0px;
    top: 0px;
    z-index: 0;
    overflow: hidden;
}

.transition{
    -webkit-transition: none 0.4s ease;
    -moz-transition: none 0.4s ease;
    -ms-transition: none 0.4s ease;
    -o-transition: none 0.4s ease;
    transition: none 0.4s ease;
    -webkit-transition-property: top, right, left, bottom, border;
    -moz-transition-property: top, right, left, bottom, border;
    -ms-transition-property: top, right, left, bottom, border;
    -o-transition-property: top, right, left, bottom, border;
    transition-property: top, right, left, bottom, border;
}

.hide{
    display: none;
}

.open{
    display: block;
}

Answer 1

您正在更改display属性，但是：

display无法转换
您未将其包含在要转换的媒体资源列表中

选择can be transitioned的属性，将其更改为display，然后将其放入您为transition-property设置的列表中。

Answer 2

我不知道你想要达到什么目标。子菜单必须来自右边的空气？菜单从左边进来？当你提出问题时，请更加彻底地解释自己。

为每个菜单项创建不同的ul并将它们全部放在主菜单下是不好的语义。您可以将ul嵌套在li。
如果您有课程.hide，则不需要像.open这样的课程。在jQuery中只需删除或切换该类
你不能指望一个项目制作动画而不给你一些输入，比如悬停或点击。阅读this article on CSS-tricks.com如何制作动画。您可以在jquery中编辑属性，如果正确完成，它将自动生成
您已设置#shop-menu: left: 100px。如果您使用left / top / right / bottom，则需要将元素设置为absolute或relative。 Read more about that here。
如果您愿意，可以将e.currentTarget替换为this

无序列表是否响应CSS转换？

2 个答案: