jquery - CSS-transition 等于 SlideToggle 动画

Question

使用下面的代码 <panel>一旦用户将鼠标悬停在 <button> 上就会显示.这一切都很好。但是，我对 <panel> 的动画不满意。 .

对我来说 <panel>像“ Accordion ”一样滑入，但我更喜欢这样的动画，其中面板通过类似于 jQuery 的 slideToggle 动画 的“下降底线”显示 .

这甚至可以通过 CSS 实现吗？如果可以，我需要更改代码中的哪些内容才能使该动画正常运行？

你也可以找到我的代码here

html {
  height: 100%;
}

body {
  height: 100%;
}

.button {
  height: 50%;
  width: 70%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: orange;
}

.button_name {
  height: 20%;
  width: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.button:hover .panel {
  height: 80%;
}

.panel {
  width: 100%;
  float: left;
  overflow: hidden;
  height: 0%;
  transition: height 0.5s linear;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.panel div {
  height: 25%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

<div class="button">

  <div class="button_name">Menu</div>
  <div class="panel">
    <div> 1.0 Menu </div>
    <div> 2.0 Menu </div>
    <div> 3.0 Menu </div>
    <div> 4.0 Menu </div>
  </div>

</div>

Answer 1

这很简单:通过更改高度，您会导致单个菜单项的高度折叠。由于 CSS 从上到下布局，这意味着当高度不足以容纳内容时，底部将被切断而不是顶部(后者是您想要的效果)。

解决方案是:

1. 使用恒定高度，然后
2. 使用 CSS 转换上/下滑动面板内容

您只需在开始时沿 y/垂直轴平移它自己的高度 (transform: translateY('-100%'))，并将该值更改为 0% 悬停时:

html {
  height: 100%;
}

body {
  height: 100%;
}

.button {
  height: 50%;
  width: 70%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: orange;
  
  /* Hide panel content that are translated out of parent bounding box */
  overflow: hidden;
}

.button_name {
  height: 20%;
  width: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
  
  /* Set position to relative so it stays above panel content */
  position: relative;
  z-index: 1;
}

.button:hover .panel {
  /* Slide the panel down */
  transform: translateY(0%);
}

.panel {
  width: 100%;
  float: left;
  overflow: hidden;
  height: 80%;
  transition: all 0.5s linear;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  
  /* Slide the panel up */
  transform: translateY(-100%);
}

.panel div {
  height: 25%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

<div class="button">

  <div class="button_name">Menu</div>
  <div class="panel">
    <div> 1.0 Menu </div>
    <div> 2.0 Menu </div>
    <div> 3.0 Menu </div>
    <div> 4.0 Menu </div>
  </div>

</div>