Как реализовать планое выпадение текста?

Question

Я сделал при клике на кнопку , чтобы высота блок плавно увеличивалась как в красном блок , только мне надо чуток сделать по другому , у меня есть желтый блок , у меня должно отображаться только первая строчка все остальное предложение должно быть ... в трех точках и когда я нажимаю на кнопку я бы хотел , чтобы оно также плавно опускалось как и красный блок , а не сразу весь текст отображался ?

const app = new Vue({
   el: '#app',
   data() {
      return {
         active: false
      }
   },
});

.wrapper {
   width: 200px;
   background: red;
   overflow: hidden;
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.5s ease;
}
.qwe {
   min-height: 0;
}

.wrapper.open {
   grid-template-rows: 1fr;
   white-space: wrap;
   overflow: visible;
   text-overflow: clip;
}

.second__wrapper {
   width: 200px;
   height: 25px;
   background: yellow;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.5s ease;
}

.second__wrapper.open {
   grid-template-rows: 1fr;
   height: auto;
   white-space: wrap;
   overflow: visible;
   text-overflow: clip;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <button @click="active = true">Open</button>
      <div class="wrapper" :class="{open: active}" @mouseleave="active = false">
         <div class="qwe">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore quasi, quos, obcaecati quis illum dolore sint error doloribus quae iure mollitia voluptatum sapiente perspiciatis nobis odio itaque deleniti vel. Nihil.
         </div>
      </div>
      <div class="second__wrapper" :class="{open: active}">
         <div class="qwe">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore quasi, quos, obcaecati quis illum dolore sint error doloribus quae iure mollitia voluptatum sapiente perspiciatis nobis odio itaque deleniti vel. Nihil.
         </div>
      </div>
   </div>

БЛОГ НА HUSL

Как реализовать планое выпадение текста?

Ответы (0 шт):