时间戳

首页 > 解决方案 > 为移动文本进行平滑过渡

html - 为移动文本进行平滑过渡

问题描述

下面是我创建的餐厅菜单的简化版本。当您将鼠标悬停在菜肴上时，会显示菜肴的描述，我创建了一个过渡以使其更平滑。

下一道菜，即下方的菜单项，在显示上方菜单项的描述时被下推。我想创建一个过渡，以便下面的文本在页面上更顺畅地向下移动，而不是立即从一个地方更改到另一个地方，因为这在页面上看起来相当有问题（如果这有任何意义的话）。

我还想让不透明度过渡双向工作 - 现在，当我将鼠标悬停在项目上时可以工作，但是当我将鼠标从项目上移开时，它会立即消失，所以目前过渡不能双向工作. 我试过使用非悬停功能，但没有运气。

这是我的代码：

小提琴演示

HTML：

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

CSS：

h4:hover + .beskrivelse {
  opacity: 1;
  height: auto;
}

h4:hover {
  color: red;
}

.beskrivelse {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 3s ease-out;
}

标签： htmlcss

解决方案

.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 */
}

演示

推荐阅读