Question

我一直在尝试创建一种过渡效果，在悬停时，子菜单从主导航栏下方滑出。到目前为止，我已经掌握了所有元素，浪费了各种各样的帖子，但却无济于事。但是无济于事。

我猜我必须摆脱display: none -> display: block隐藏子菜单的方式，因为它对过渡没有好处，但是其他各种方法，例如过渡max-height，opacity从一个巨大的top值等下拉它已经失败了。使用膨胀的top值方法，子菜单可以在所有内容上滑动而不是在下面，并且在将背景透明时，以某种方式更改z-index值会将其推到一切。非常奇怪的行为。

如果有人能向我解释如何为子菜单创建平滑的滑出过渡，我将不胜感激。

谢谢

Answer 1

工作示例：

https://jsfiddle.net/6umr3733/1/

过程：我们将下拉列表的top值设置为-100％。这使它脱离了屏幕。我们给它一个transition值，使其在下降时保持平滑。

.dropdown_content {
  line-height: 1;
  position: absolute;
  top:-100%;
  background-color: #fff;
  z-index:-10;
  width: 120%;
  left: -20%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

当我们将鼠标悬停在dropdown上时，您的div会下降200％，即原来的位置。

.dropdown:hover .dropdown_content {
  top:100%;
}

希望我能帮到你，祝你好运。

Answer 2

您可以简单地使用transform: scaleY();属性在隐藏时将子菜单压缩为0，在可见时将其压缩为1.

检查JSFiddle

只需删除Display属性，然后添加transition，transform: scaleY(0); transform-origin: 0 0;何时正常; transform: scaleY(1);则悬停至.dropdown_content。

Answer 3

转换比例或转换max-height: 0是导航元素的更好选择。

JSFiddle

如果元素的初始状态是“display：none”，它将在DOM中传递，这将隐藏辅助技术中的元素（以及任何子元素）。

此外，您可以使用sibling sectors选择.dropdown，而不是过度嵌套元素

相邻的兄弟姐妹：.dropbtn:hover + .dropdown_content

如何使用CSS过渡从导航栏下滑出子菜单？

3 个答案: