html - 如何让悬停变得流畅？

Question

.proposal p{
  font-size: 14px;
  color: #494949;
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 20px;
  max-height: 100px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.proposal:hover p{
  overflow: visible;
  display: inline-block;
}

这里我在一个段落上应用了悬停来显示其隐藏内容的其余部分，如何使动画平滑？

Answer 1

这是仅使用 CSS 实现此目的的一种方法。不幸的是，溢出属性不能自然地设置动画，因此您必须使用多种技巧来实现所需的效果。在这里，我们对边距、填充和字体大小进行动画处理以伪造效果。

.proposal {
  background-color: #f2f2f2;
  padding: 10px;
}

.proposal h3 {
  margin: 0;
}

.proposal p {
  font-size: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
}

.proposal:hover p {
  opacity: 1;
  margin: 12px 0 0;
  font-size: 12px;
  transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
}

<div class="proposal">
  <h3>Hover me</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et pulvinar quam. Integer ut mauris non mi malesuada fringilla. Quisque mattis, ante eu posuere facilisis, sem libero vehicula libero, tincidunt aliquet ante ligula et nisi. Pellentesque nec
    facilisis orci. Nunc sagittis purus ut eros efficitur pharetra. Nunc fermentum enim id lectus commodo, non luctus tortor finibus. Aliquam mauris tellus, vestibulum sed lacus auctor, suscipit commodo lacus. Aliquam nunc tortor, gravida in est bibendum,
    varius accumsan massa. Phasellus ultricies arcu ipsum, eu tempus ante vehicula sed.
  </p>
</div>