html - 在悬停时应用 css 缓动过渡

Question

我使用 css 创建了框，在悬停时它会显示溢出内容(文本)，

有什么方法可以将平滑的交易效果应用到这个悬停效果上吗？

我试过使用 css-transition 但它不起作用!

I don't want to change the method of doing it! Need only css/Javascript solution.

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 属性...

在你的例子中，你将不得不处理高度，而不是处理溢出，尽管从固定高度到自动的转换并不容易。

一个可能的黑客攻击，如回答 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>