Применить CSS легкость переходов по наведению

Question

Я создал окно с помощью CSS и на парении он покажет содержание переполнения (текст),

Есть ли способ, чтобы применить эффект плавных транзакций для этого парения эффекта?

Я пробовал использовать css-transition, но его не работает!

Я не хочу менять способ его выполнения! Нужно только разрешение css/Javascript.

html { 
 
    height: 100%; 
 
    width: 100%; 
 
    font-size: 14px; 
 
    color: #000; 
 
    font-family: sans-serif; 
 
    text-align: justify; 
 
} 
 
.box { 
 
    margin: 100px auto; 
 
    position: relative; 
 
    width: 500px; 
 
    cursor: pointer; 
 
    transition: all 0.4s ease; 
 
    background: #eee; 
 
    padding: 5px; 
 
    color: #222; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    -webkit-text-overflow: ellipsis; 
 
    transition: all 1s ease; 
 
} 
 
.box:hover { 
 
    white-space: normal; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    width: 75%; 
 
    height: 10px; 
 
    bottom: 0; 
 
    box-shadow: 0px 9px 20px #ccc; 
 
    position: absolute; 
 
    left: 12%; 
 
    z-index: -1; 
 
} 
 
.box > div { 
 
    overflow: hidden; 
 
    transition: all 1s ease; 
 
}

<div class="box"> 
 
    <div class="first"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nisl eu tortor accumsan hendrerit. Nulla dui quam, mattis iaculis pharetra ut, cursus ut tortor. Donec velit nisl, pellentesque eu tellus ac, tempus efficitur elit. Sed et enim tincidunt, 
 
    iaculis tortor eget, sodales nulla. In facilisis tincidunt aliquet. Mauris scelerisque leo eu lectus facilisis vulputate. Proin interdum sed nibh at luctus. In turpis nunc, gravida vel arcu eget, fringilla dapibus lacus. Duis sagittis nisl sed sem 
 
    vulputate commodo. Morbi nisl neque, fermentum in mollis gravida, aliquam quis felis. Etiam et placerat mauris. Integer ut nulla in sem sagittis varius at et mi. Maecenas in rutrum orci. Sed vel mi vel erat vulputate sodales. Sed velit velit, ullamcorper 
 
    eget finibus ut, pharetra ac enim. Morbi eu placerat orci. Mauris augue enim, semper quis convallis id, dapibus eget sem. Aenean lacus leo, fermentum luctus erat vitae, ultrices tempus libero. Curabitur ultrices tellus a mauris interdum, commodo consectetur 
 
    magna sollicitudin. 
 
    </div> 
 
</div>

Answer 1

Вы должны были бы использовать некоторые CSS свойство, которое может быть анимированный ...

В вас случае, вместо того, чтобы иметь дело с overflow, вам придется иметь дело с высотой, хотя сделать переход с высоты, фиксированной на авто, непросто.

Возможным хак, как и ответил here, заключается в использовании max-height, хотя это не очень, так как она требует использования жестко закодированные значения ...

html { 
 
    height: 100%; 
 
    width: 100%; 
 
    font-size: 14px; 
 
    color: #000; 
 
    font-family: sans-serif; 
 
    text-align: justify; 
 
} 
 
.box { 
 
    margin: 100px auto; 
 
    position: relative; 
 
    width: 500px; 
 
    cursor: pointer; 
 
    background: #eee; 
 
    padding: 5px; 
 
    color: #222; 
 
    text-overflow: ellipsis; 
 
    -webkit-text-overflow: ellipsis; 
 
} 
 

 
.box:after { 
 
    content: ''; 
 
    width: 75%; 
 
    height: 10px; 
 
    bottom: 0; 
 
    box-shadow: 0px 9px 20px #ccc; 
 
    position: absolute; 
 
    left: 12%; 
 
    z-index: -1; 
 
} 
 
.first { 
 
    transition: all 0.4s ease; 
 
    max-height: 13px; 
 
    overflow: hidden; 
 
} 
 

 
.box:hover .first { 
 
    max-height: 250px; 
 
}

<div class="box"> 
 
    <div class="first"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nisl eu tortor accumsan hendrerit. Nulla dui quam, mattis iaculis pharetra ut, cursus ut tortor. Donec velit nisl, pellentesque eu tellus ac, tempus efficitur elit. Sed et enim tincidunt, 
 
    iaculis tortor eget, sodales nulla. In facilisis tincidunt aliquet. Mauris scelerisque leo eu lectus facilisis vulputate. Proin interdum sed nibh at luctus. In turpis nunc, gravida vel arcu eget, fringilla dapibus lacus. Duis sagittis nisl sed sem 
 
    vulputate commodo. Morbi nisl neque, fermentum in mollis gravida, aliquam quis felis. Etiam et placerat mauris. Integer ut nulla in sem sagittis varius at et mi. Maecenas in rutrum orci. Sed vel mi vel erat vulputate sodales. Sed velit velit, ullamcorper 
 
    eget finibus ut, pharetra ac enim. Morbi eu placerat orci. Mauris augue enim, semper quis convallis id, dapibus eget sem. Aenean lacus leo, fermentum luctus erat vitae, ultrices tempus libero. Curabitur ultrices tellus a mauris interdum, commodo consectetur 
 
    magna sollicitudin. 
 
    </div> 
 
</div>