Question

下面是我创建的餐厅菜单的简化版本。当您将鼠标悬停在盘子上时，会出现关于盘子的描述，并且我创建了一个过渡以使其更平滑。

当显示上层菜单项的描述时，下一个菜单项（下面的菜单项）将被下推。我想创建一个过渡，以便使下面的文本在页面上更平滑地向下移动，而不是立即从一个位置更改为另一个位置，因为这在页面上看起来很不整齐（如果有任何意义）。

我还想使不透明度过渡同时起作用-现在，当我将鼠标悬停在该项目上时可以起作用，但是当我将鼠标移开它时，它会立即消失，因此过渡不会同时起作用在这一刻。我已经尝试过使用没有悬停功能的功能了。

这是我的代码：

HTML：

y=0

CSS：

<html>
<body>
<h4 class="navn"> Pizza </h4>
<div class="beskrivelse">
<p> ingredients: cheese, ham, pepperoni </p>
</div>

<h4 class="navn"> Hamburger </h4>
<div class="beskrivelse">
<p> Comes with salad and fries  </p>
</div>
</body>
</html>

Answer 1

.beskrivelse {
  max-height: 0; /* <-- max-height since we don't know the actual height */
  ...
  transition: all 3s ease-out; /* <-- transition all properties */
}

h4:hover+.beskrivelse {
  ...
  max-height: 100px; /* <-- a safely large value */
}

Demo

Answer 2

好吧，因为CSS值只能在固定单位值之间来回转换，所以看起来很跳动。 height:0和height:auto没有单位，因此无法显示过渡。

有多种解决方法，每种都有其自身的缺点。 a bunch more detail关于可用选项。如isherwood所说，切换到max-height是更受欢迎的选择之一。

也就是说，还有其他方法可以解决此问题，而无需尝试设置高度的动画。

h4 {
  padding:0;
  margin:0;
}

.beskrivelse {
  /* give container position to keep child in place */
  position: relative;
  margin:0;
  padding:0;
}
.beskrivelse p {
    /* take the element out of the flow */
    position: absolute;
    top: 0;
    left:100px;
    z-index: 10;
    /* move it away and hide it */
    transform: translateY(200%);
    opacity:0;
    
    /*setup animation */
    transition: all 0.25s ease-in-out;
   
   /* make it look nice */
   margin:0;
   padding: 10px;
   border-radius: 8px;
   border: 1px solid #6DABE4
   background: #ffff;
   box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}

h4:hover + .beskrivelse p {
  transform: translateY(0);
  opacity:1;
}

<h4 class="navn"> Pizza </h4>
<div class="beskrivelse">
<p> ingredients: cheese, ham, pepperoni </p>
</div>

<h4 class="navn"> Hamburger </h4>
<div class="beskrivelse">
<p> Comes with salad and fries  </p>
</div>

平滑过渡文本

2 个答案: