Question

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

对我而言，<panel>像手风琴一样滑入＆＃34;手风琴＆＃34;但我更喜欢一个动画，其中小组显示由＆＃34;下线＆＃34;类似于 jQuery 的 slideToggle动画。

使用 CSS 是否可行？如果是，我需要在代码中更改哪些内容才能使此动画生效？

您还可以找到我的代码here

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这很简单：通过更改高度，您可以使各个菜单项的高度崩溃。由于CSS从上到下排列，这意味着当高度不足以容纳内容时，底部将被切除而不是顶部（后者是您想要的效果）。

解决方案是：

使用恒定高度，然后
使用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>

CSS转换等于SlideToggle动画

1 个答案: