时间戳

首页 > 解决方案 > 为什么我在 CSS 中的轻松过渡不起作用？

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

问题描述

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

我记得阅读了其他 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;
}

标签： htmlcss

解决方案

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

  1. 你有语法错误transition......你设置transition-property为max-heigth然后你all在它之后添加了那个地方transition-duration......你应该删除max-height并离开all只是因为你有填充+高度过渡。

  2. 在悬停类上...您正在设置padding-bottomto100%但您没有将其包含在您的转换中，这将立即触发动画您应该将您的转换属性替换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>

推荐阅读