如何制作线夹动画

Question

我有一个带有文字的盒子。默认情况下它只显示 2 行，当用户将鼠标悬停在其上时显示整个文本。但是，我在动画化时遇到问题。显示属性似乎不可设置动画。

我怎样才能让它动起来？
如果有帮助的话，我也在使用“framer-motion”，如果您有使用它的解决方法，那就没问题了。

.box {
  transition: all 0.3s ease-in-out; /* doesn't work */
}

.title {
  color: green;
  font-weight: bold;
}

.text {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;  
   overflow: hidden;
   
   transition: all 0.3s ease-in-out; /* doesn't work */
}

.box:hover .text {
   display: block;
}

<div class="box">
  <span class="title">Title</span>
  <div class="text">
  Et eirmod erat diam ipsum sit diam ut et est at ut tempor consequat nisl duis ut justo sit. Aliquyam adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna labore. Molestie dolores justo consetetur consequat. Sed sit aliquyam eirmod amet nonummy facilisis diam. Diam lorem dolores stet labore eos duo illum facer qui justo duo stet consetetur diam magna.
  </div>
</div>

为什么这不是一个重复的问题：

我想专门使用line-clamp（或者如果有类似的属性）来限制我想要的行数。我不想使用猜测或概率！

Answer 1

这是我的解决方案较新的解决方案，我想它可以帮助您实现您想要的目标，显示属性不适用于过渡，您可以使用高度。

let div1 = document.querySelector("#div1");
let height = div1.offsetHeight;
div1.classList.add('text');
div1.addEventListener("mouseover", () => {
  div1.style.height = height + "px";
});
div1.addEventListener("mouseout", () => {
  div1.style.height = "39px";
});

.text {
  overflow: hidden;
  height: 39px;
  transition: all 0.3s ease-in-out;
}

.text::after {
  content: "..";
  background-color: #fff;
  color: #000;
  z-index: 999;
  position: absolute;
  right: 20px;
  top: 28px;
  display: inline-block;
  width: 75px;
  transition: all 0.3s ease-in-out;
}

.text:hover::after {
  width: 0;
  visibility: hidden;
}

<div class="box">
  <div id="div1">
    Et eirmod erat diam ipsum sit diam ut et est at ut tempor consequat nisl duis ut justo sit. Aliquyam adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna labore. Molestie dolores justo consetetur consequat.
    Sed sit aliquyam eirmod amet nonummy facilisis diam. Diam lorem dolores stet labore eos duo illum facer qui justo duo stet consetetur diam magna. Et eirmod erat diam ipsum sit diam ut et est at ut tempor consequat nisl duis ut justo sit. Aliquyam
    adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna labore. Molestie dolores justo consetetur consequat. Sed sit aliquyam eirmod amet nonummy facilisis diam. Diam lorem dolores stet labore eos duo illum
    facer qui justo duo stet consetetur diam magna. Et eirmod erat diam ipsum sit diam ut et est at ut tempor consequat nisl duis ut justo sit. Aliquyam adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna
    labore. Molestie dolores justo consetetur consequat. Sed sit aliquyam eirmod amet nonummy facilisis diam. Diam lorem dolores stet labore eos duo illum facer qui justo duo stet consetetur diam magna. Et eirmod erat diam ipsum sit diam ut et est at
    ut tempor consequat nisl duis ut justo sit. Aliquyam adipiscing et esse consetetur dolores et suscipit stet magna invidunt sea et sadipscing ea at magna labore. Molestie dolores justo consetetur consequat. Sed sit aliquyam eirmod amet nonummy facilisis
    diam. Diam lorem dolores stet labore eos duo illum facer qui justo duo stet consetetur diam magna.
  </div>
</div>