html - 为什么我在 CSS 中的缓动过渡不起作用？

Question

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

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

<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

您的代码有 2 个主要问题:

1. 你在 transition 上有语法错误......你将 transition-property 设置为 max-heigth 然后你添加了 all 之后是 transition-duration 点...你应该删除 max-height 并只保留 all因为你有 padding + height 过渡。

2. 在悬停类上...您将 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;
}

<div class="dropdown">
  <a href="https://wovenmagazine.com/shop/" id="quick-shop" class="dropdown-toggle" data-toggle="dropdown">Show the lovely cute bear</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>