How to animate line clamp-CodePudding

I have a box with text. It shows only 2 lines by default and shows the whole text when the user hovers over it. However, I have a problem animating it. The display property seems to be not animatable.

How can I animate it?
If it helps, I'm also using "framer-motion" and it's okay if you have a workaround using it.

.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 >
  <span >Title</span>
  <div >
  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>

Why it's not a duplicate question:

I want to specifically use the line-clamp (or if there's a similar property) to limit the number of lines by the number I want. I don't want to use guesses or probability!

CodePudding user response：

As you can't animate line-clamp (or display) we have to find something animatable but which will nonetheless show exactly two lines in the non-hovered state.

max-height is animatable.

This snippet takes a 'guess' at a suitable max-height for when line-clamp is in use - it needs to be larger than 2 lines high so that the line-clamp can work but it needs to be not so large that there is too discernible a jump when we start the hover transform.

.box {
  transition: all 0.3s ease-in-out;
}

.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;
  /* ADDED */
  max-height: 3em;
}

.box:hover .text {
  -webkit-line-clamp: 40;
  max-height: 40em;
}

<div >
  <span >Title</span>
  <div >
    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>

This is of course only a partial method as when hovering is stopped the transition back to line-clamp: 2 is not smooth. I can't at the moment see a way around that other than to invoke JS on animationend and put the line clamp back at that point.

CodePudding user response：

Here is my solution, Display property doesn't work with transition, you can use height.

.box {
  transition: all 0.3s ease-in-out;
}

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

.text {
  overflow: hidden;
  display: inline-block;
  height: 35px;
  transition: all 0.3s ease-in-out;
}

.text:hover {
  height: 135px;
}

<div >
  <span >Title</span>
  <div >
    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>

CodePudding user response：

You can use opacity instead of display. and a span tag for a portion of text that you want:

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

.box {
  background: lightblue;
}


.show {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.box:hover .show {
  opacity: 1;
}

<div >
  <span >Title</span>
  <div >
    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
     <span >
        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.
     </span>
  </div>
</div>