Question

如果任何人都可以查看我的代码，我需要一些帮助。因此，我在悬停菜单的最大高度上应用了缓入缓出过渡。起初它正在工作，但是突然间，它不再存在。

我记得阅读过其他Stack Overflow答案，并尝试将转换应用于父级，而不是悬停。我认为可能的解决方案是，我必须通过浏览下拉菜单，然后选择div.header，row，column来应用过渡，只是为了进入菜单本身。我可能是错的。我要做的是使悬停菜单向下滚动，并在光标离开菜单时能够轻松向上滚动。

<div class="dropdown">
  <a href="https://wovenmagazine.com/shop/" id="quick-shop" class="dropdown-toggle" data-toggle="dropdown">Shop</a><ul class="dropdown-menu">
    <div class="header">
      <div class="row">
      <div class="column">
        <li><a href="#"><img src ="https://icon-library.net/images/icon-cute/icon-cute-0.jpg"></a></li></div>
      <div class="column">
      <li><a href="#">Action</a></li>
        </div>
      <div class="column">
      <li><a href="#">Action</a></li></ul></ul>
    </div>
    </div>
  </div>
  </div>

.dropdown-toggle {
  position: absolute;
  display: inline-block;
  top: -38px;
  /*not the best solution but will do for now..*/


}

.dropdown-menu {
  width: 100%;
  left: 0;
  top: -20px;
  /*not the best solution but will do for now.. */
  max-height:0em;
  overflow:hidden;
  position: absolute;
  background-color: white;
  transition: max-height all 6s ease-in-out;
  z-index: 1;
  opacity: 0.9;
}

ul.dropdown-menu  div.header li {
    transition: max-height all 6s ease-in-out;
/* ^^ this is obviously wrong, but I'm trying to navigate to the li elements*/

}
.dropdown {
    /** Make it fit tightly around it's children */
  top: 0;
  z-index: 128;
  font-family: 'p22-underground', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
}

.dropdown:hover .dropdown-menu {
    /** Show dropdown menu */
  max-height: 600px;
  display: block;
   color: white;
   width: 100%;
  font-family: 'p22-underground', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  padding-bottom: 100%;
} 

.dropdown > ul > li {
  left: 0;
  right: 0;
} 

.dropdown-menu .header {
  padding: 16px;
  color: white;
  background-color: grey;
}

Answer 1

您的代码有两个主要问题：

您在transition上语法有误...将transition-property设置为max-heigth，然后在其后添加了all，这是{{1 }} ...您应该删除transition-duration并离开max-height只是因为您具有填充+高度过渡。
在悬停类上……您正在将all设置为padding-bottom，但没有在过渡中包括该内容，否则会立即触发动画，因此您应该替换过渡属性100%到max-height或只是删除填充效果，因为它没有不适感。

以下是您可以在下面运行的摘录：

all

.dropdown-menu {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: white;
  transition: max-height 1s ease-in-out;
  opacity: 0.4;
}

.dropdown {
  font-weight: 100;
  text-transform: uppercase;
}

.dropdown:hover .dropdown-menu {
  /** Show dropdown menu */
  max-height: 250px;
  font-weight: 100;
  text-transform: uppercase;
}

.dropdown>ul>li {
  left: 0;
  right: 0;
}

.dropdown-menu .header {
  padding: 16px;
  color: white;
  background-color: grey;
}

为什么我在CSS中的轻松过渡无法正常工作？

1 个答案: