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

Question

我一直试图创建一个过渡效果，在悬停时，一个子菜单从主导航栏下面滑出。到目前为止，我已经准备好了所有的元素，并且浪费了很多时间来玩各种不同的方法，但是都没有用。

这是JSFiddle。

我猜我将不得不摆脱隐藏子菜单的display: none -> display: block方式，因为它对转换没有好处，但是其他各种方法，比如转换max-height、opacity、从一个巨大的top值中将它取下来等等，都失败了。使用膨胀的top值方法，子菜单滑过所有的内容，而不是在下面，更改z-索引值在某种程度上将其推到了所有的后面，同时使背景变得透明。非常奇怪的行为。

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

谢谢

Answer 1

转换缩放或转换max-height: 0是导航元素的一个更好的选择。

JSFiddle

如果元素的初始状态是"display: none“，则在DOM中传递它，这将隐藏该元素(以及任何子元素)，使其不受辅助技术的影响。

另外，您可以使用兄弟部门来选择.dropdown，而不是过度嵌套元素。

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

Answer 2

工作实例：

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 3

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

检查JSFiddle

只需删除Display属性，添加一个transition，当正常时添加transform: scaleY(0); transform-origin: 0 0;，当悬停到.dropdown_content时添加transform: scaleY(1);。