在悬停时应用 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，不如处理高度，尽管从固定高度过渡到自动并不容易。

一个可能的技巧，正如这里回答的那样，是使用 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>