Question

我有一个菜单，我想用css3制作动画。当您将鼠标悬停在主菜单上时，我想在子菜单中滑动。但是，我不知道将transition属性放在何处，以使其在两个方面都具有动画效果。

以下是一个正常工作的示例，但仅限于悬停在其中。

但是当我结束我的悬停而不是向上滑动时，它就会消失。

我已尝试将transition放在#sub元素上，但之后没有任何反应。

这是css：

#main {
    position: relative;
    height: 110px;
    width: 100%;
    background-color: red;
}

#sub {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: green;
    margin-top: -100px;
    z-index: -10;
    //If transition is put here, nothing happens
}

#menu:hover > #sub {
    margin-top: 0;
    transition: margin-top 0.5s ease;
}

和HTML：

<nav>
    <div id="menu">
        <div id="main">MAINMENU</div>
        <div id="sub">SUBMENU</div>

    </div>

</nav>

Answer 1

http://jsfiddle.net/34kcamjv/4/

设置元素本身的过渡，所以当你解开它时，它会返回到原始状态并带有过渡...

#menu > #sub {
    transition: margin-top 0.5s ease;
}

Answer 2

您是否尝试使用正确的供应商前缀添加转换？

-webkit-transition: margin-top 0.5s ease;
-moz-transition: margin-top 0.5s ease;
-o-transition: margin-top 0.5s ease;
transition: margin-top 0.5s ease;

只是一个想法。

Answer 3

这是我的Chrome浏览器上的一个错误。代码在IE11，Firefox和Chrome Canary上按预期工作。其他用户无法在其Chrome版本上复制该错误。

当悬停父元素时触发子元素的转换

3 个答案: