[Vuejs]-Css – how to use ease-in when clicking show more button

by

0👍

As you stated, -webkit-line-clamp: 2 may be a reason the animation won’t play. However, overflow: hidden should not prevent this if we use the animation property with a keyframe, to delay its timing.

In addition we can create the dropdown effect by using the transition property, and max-height.

Below is a version of your css, that will get you the transition you want 🙂

You can adjust the property values for height, and timings for animation and transition, as you see fit.

Let me know if this helps 🙂 !

.description {
    margin-bottom: 36px;
    max-height: 500px;
    transition: all ease-in 0.3s;
    overflow: auto;
  }
  @keyframes delay-overflow {
    from { overflow: auto; }
  }
  .description--hidden {
    max-height: 40px;
    overflow:hidden;
    animation: 1s delay-overflow;
  }

Leave a comment