我有很多麻烦试图这样做。当我将其中一个元素悬停时,我终于找到了如何为一个旁边的菜单做扩展动画。
问题是我想做一个动画来关闭它。我尝试将动画制作为开放动画(使用from - > to)并且它不起作用。
我尝试使用列表中的不同容器(ul,div,li,无论一个一个)进行最大高度的转换,我尝试搜索不同类型的已经制作的动画,但没有一个工作,菜单刚刚弹出没有动画就消失了。
我基本上想要的是一个平滑的动画来向下移动(到达)其他元素,然后在菜单关闭时向上移动。
实际上它有2个动画:扩展最大高度,并从右向左移动。但我无法通过动画来关闭它。
我不想使用Javascript,因为它适用于学校项目,但我们还没有看到它。
https://jsfiddle.net/exrp4doa/
@-webkit-keyframes slider {
from {
border-left: 300px
}
to {
border-left: 0px
}
}
@keyframes slider {
from {
margin-left: 300px
}
to {
margin-left: 0px
}
}
@-webkit-keyframes altura {
from {
max-height: 0px
}
to {
max-height: 500px
}
}
@keyframes altura {
from {
max-height: 0px
}
to {
max-height: 500px
}
}
aside {
width: 25%;
display: inline-block;
vertical-align: top;
margin-top: 20px;
margin-bottom: 20px;
}
aside > div:not(#marcador) {
background-color: rgb( 40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-top: 5px;
margin-right: -15px;
font-family: 'Press Start 2P';
font-size: 0.7em;
line-height: 10px;
padding: 15px;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
#marcador div {
display: none;
opacity: 0;
visibility: hidden;
position: static;
}
#marcador li:hover >div {
display: block;
opacity: 1;
visibility: visible;
padding-left: 20px;
-webkit-animation-name: slider;
-webkit-animation-duration: 0.5s;
animation-name: slider;
animation-duration: 0.5s;
}
#marcador li li {}
#marcador li:hover li {
-webkit-animation-name: altura;
-webkit-animation-duration: 5s;
animation-name: altura;
animation-duration: 5s;
}
#marcador li:hover >a {
display: block;
opacity: 1;
visibility: visible;
}
#marcador ul {
margin: 0;
padding: 0;
list-style-type: none;
position: static;
}
#marcador ul li>a {
background-color: rgb( 40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-top: 5px;
margin-right: -15px;
font-family: 'Press Start 2P';
font-size: 0.7em;
line-height: 10px;
padding: 15px;
padding-left: 35px;
}
#marcador ul ul {
padding: 0;
margin: auto;
}
#marcador ul ul a {
margin-left: 20px;
background-color: dimgray;
}
#marcador ul ul ul a {
margin-left: 40px;
background-color: gray;
color: black;
}
#marcador img {
float: left;
vertical-align: middle;
display: inline-block;
opacity: 0;
position: absolute;
visibility: hidden;
margin-left: -20px;
}
#marcador li:hover>a>img {
opacity: 1;
visibility: visible;
}
#marcador a:hover {
color: orange;
}

<aside>
<div id="marcador">
<ul>
<li>
<a><img src="Recursos/Select.png" />Inicio</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Juegos</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />Sega</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />Arcade</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Nintendo</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />NES</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Consolas</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES Mini</a>
</li>
<li>
<a><img src="Recursos/Select.png" />NES Mini</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />SEGA GENESIS</a>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Compras</a>
</li>
<li>
<a><img src="Recursos/Select.png" />DIY</a>
</li>
<li>
<a onclick="alert('Página en construcción')"><img id="info" src="Recursos/info.png" alt="INFO" /></a>
</li>
</ul>
</div>
</aside>
&#13;
答案 0 :(得分:0)
您可以使用转换而不是动画。我的演示:
aside {
width: 25%;
display: inline-block;
vertical-align: top;
margin-top: 20px;
margin-bottom: 20px;
}
aside > div:not(#marcador) {
background-color: rgb(40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-top: 5px;
margin-right: -15px;
font-family: "Press Start 2P";
font-size: 0.7em;
line-height: 10px;
padding: 15px;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
#marcador li> div {
opacity: 0;
margin-left: 300px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#marcador li:hover > div {
opacity: 1;
padding-left: 20px;
margin-left: 0;
}
#marcador li> div >ul >li {
max-height: 0;
transition: all 0.5s;
}
#marcador li:hover> div >ul >li {
max-height: 40px;
}
#marcador li:hover{
max-height: 500px !important;
}
#marcador li:hover > a {
display: block;
opacity: 1;
visibility: visible;
}
#marcador ul {
margin: 0;
padding: 0;
list-style-type: none;
position: static;
}
#marcador ul li > a {
background-color: rgb(40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-right: -15px;
font-family: "Press Start 2P";
font-size: 0.7em;
line-height: 10px;
padding: 15px;
padding-left: 35px;
}
#marcador ul ul {
padding: 0;
margin: auto;
}
#marcador ul ul a {
margin-left: 20px;
background-color: dimgray;
}
#marcador ul ul ul a {
margin-left: 40px;
background-color: gray;
color: black;
}
#marcador img {
float: left;
vertical-align: middle;
display: inline-block;
opacity: 0;
position: absolute;
visibility: hidden;
margin-left: -20px;
}
#marcador li:hover > a > img {
opacity: 1;
visibility: visible;
}
#marcador a:hover {
color: orange;
}
<aside>
<div id="marcador">
<ul>
<li>
<a><img src="Recursos/Select.png" />Inicio</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Juegos</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />Sega</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />Arcade</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Nintendo</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />NES</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Consolas</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES Mini</a>
</li>
<li>
<a><img src="Recursos/Select.png" />NES Mini</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />SEGA GENESIS</a>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Compras</a>
</li>
<li>
<a><img src="Recursos/Select.png" />DIY</a>
</li>
<li>
<a onclick="alert('Página en construcción')"><img id="info" src="Recursos/info.png" alt="INFO" /></a>
</li>
</ul>
</div>
</aside>