悬停时反向动画

debugcn 发表于 Dev

海科·马蒂斯（Heiko Matthies）

我正在尝试创建一个下拉菜单，当我将鼠标悬停在该菜单上时会向下滑动，而当我将鼠标悬停在菜单触发器上时会再次向上滑动。向下滑动的效果很好，但是我无法向上滑动的效果。如果可以使用纯CSS解决方案，那就太好了。这是我的jsfiddle：https ://jsfiddle.net/kp073okj/对于现在想要代码的你们来说，这里是：

HTML代码：

<div class="Dropdown">
<img src="Images/Dropdown.png" class="Dropdown-Button">
<div class="Dropdown-Content">
    <a href="#">Informationen</a>
    <a href="#">SocialMedia</a>
    <a href="#">Anmeldung</a>
    <a href="#">Dokumentation</a>
</div>
</div>

CSS代码：

.Dropdown {
    position: fixed;
    z-index: 250;
    display: block;
    width: 2%;
    height: auto;
    margin-left: 80%;
}

.Dropdown-Button {
    position: relative;
    z-index: 280;
    font-size: 1.6vw;
    border: none;
    padding-bottom: 0.5em;
    width: 100%;
    height: auto;
    margin-top: 1em;
}

.Dropdown-Content {
    height: 0;
    overflow: hidden;
}

.Dropdown-Content a {
    color: white;
    text-decoration: none;
    padding: 0.5em 4.65em 0.5em 0.8em;
    display: block;
    text-align: left;
    font-size: 1.6vw;   
}


.Dropdown:hover .Dropdown-Content {
    display: block;
    height: 400%;
    animation-name: dropdown;
    animation-duration: 1s;
    position: absolute;
    z-index: 280;
    background-color: #303030;
    text-align: left;
    margin-left: -0.8em;
}

.Dropdown-Content a:hover {
    background-color: #555;
}


@keyframes dropdown {
    0% {height: 0%; transition: height 2s;}
    100% {height: 400%; transition: height 2s;}
}

史考特

更好的方法可能是简单地使用过渡来更改高度，而不使用动画。毕竟，您只是在为过渡设置动画。

简而言之..这里的动画有什么价值？

body { margin: 50px; background: #aaa;}

.Dropdown {
    position: fixed;
    z-index: 250;
    display: block;
    width: 2%;
    height: auto;
    /* margin-left: 80% commented out for snippet */;
}

.Dropdown-Button {
    position: relative;
    z-index: 280;
    font-size: 1.6vw;
    border: none;
    padding-bottom: 0.5em;
    width: 100%;
    height: auto;
    margin-top: 1em;
}

.Dropdown-Content {
    display: block;
    height: 0%;
    position: absolute;
    z-index: 280;
    background-color: #303030;
    text-align: left;
    margin-left: -0.8em;
    overflow: hidden;
    transition: height 2s;
}

.Dropdown-Content a {
    color: white;
    text-decoration: none;
    padding: 0.5em 4.65em 0.5em 0.8em;
    display: block;
    text-align: left;
    font-size: 1.6vw;   
}


.Dropdown:hover .Dropdown-Content {
    height: 400%;
    transition: height 2s;
}

.Dropdown-Content a:hover {
    background-color: #555;
}

<div class="Dropdown">
<img src="http://placehold.it/140x140" class="Dropdown-Button">
<div class="Dropdown-Content">
    <a href="#">Informationen</a>
    <a href="#">SocialMedia</a>
    <a href="#">Anmeldung</a>
    <a href="#">Dokumentation</a>
</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。