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>

Answer 2

将transition: overflow 0.5s linear;放在.proposal p {}内的某处。

overflow将成为受影响的属性。我不确定这是否是您想要调整的属性，但您可以根据需要进行更改。

0.5s意味着过渡将持续半秒。根据需要进行更改。

linear表示动画在整个动画中的速度相同。还有ease和其他你可以使用但我不认为当动画长达半秒时会有很大的不同。

根据需要添加-webkit-，-moz-等。

如何使悬停平稳？

2 个答案: