在悬停时应用css轻松转换

时间:2014-12-11 12:20:23

标签: html css css3 overflow css-transitions

我使用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>

1 个答案:

答案 0 :(得分:3)

您需要使用一些可以动画的css属性...

在你的情况下,你不得不处理overflow,而是要处理高度,尽管从高度固定到自动转换并不容易。

正如已回答here一样,可能的黑客是使用max-height,虽然它并不漂亮,因为它要求您使用硬编码值...

&#13;
&#13;
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;
 }
&#13;
<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>
&#13;
&#13;
&#13;