关于如何使用CSS动画我的下拉菜单,我有点迷失方向。你们这些人能把我点燃吗?
我试过了
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
但是我不知道如何准确地做到这一点。子菜单显示但立即没有任何转换。任何帮助都会很棒。
.dropbtn {
background-color: inherit;
color: inherit;
padding: inherit;
font-size: inherit;
}
.dropdown {
position: relative;
display: inline-block;
font-size: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
height: 100px;
}
.dropdown-content a {
color: black;
padding: 12px 12px;
text-decoration: none;
display: block;
background-color: white;
}
.dropdown:hover .dropdown-content {
display: block;
height: 200px;
}
<ul>
<li class="dropdown">
<a href="javascript:" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</li>
</ul>
display
属性不能动画,因为它既可以是一个值,也可以不是,它们之间没有任何内容。您更愿意转换元素的opacity
属性,默认情况下将其设置为0,并在悬停时将其设置为1,删除display: none;
。除此之外,使用pointer-events: none
防止不可见的.dropdown-content
元素拦截任何鼠标事件,如悬停或点击,并在父元素悬停时将其设置为pointer-events: all
。
.dropbtn {
background-color: inherit;
color: inherit;
padding: inherit;
font-size: inherit;
}
.dropdown {
position: relative;
display: inline-block;
font-size: inherit;
}
.dropdown-content {
opacity: 0;
pointer-events: none;
position: absolute;
background-color: white;
min-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
height: 100px;
}
.dropdown-content a {
color: black;
padding: 12px 12px;
text-decoration: none;
display: block;
background-color: white;
}
.dropdown:hover .dropdown-content {
opacity: 1;
height: 200px;
pointer-events: all;
}
<ul>
<li class="dropdown">
<a href="javascript:" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</li>
</ul>