Question

我想编码，以便当我将鼠标悬停在图片上时，下方的div会更改高度，但它会更改，但请不要轻易帮助。我想知道为什么轻松不起作用，我做错了什么，我应该修理什么以及怎么做！

.pic1{
    width:400px;    
}

.f1{
    height:0px; 
    overflow:hidden; 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease ;
}
.pic1:hover .f1{
    height:auto;
}

</style>

<div class="pic1"><center><h3 style="color:#00afef;">FlexMount S15</h3><br>
<a href="http://www.mobotix.com/other/Products/Cameras/FlexMount-S15" target="_blank">    <img src="images/mo1.jpg" alt="" data-scroll-reveal="over 0.9s enter left ease-in-out 400px"/></a><br></center>
<div class="f1"><br>
    <ul>
    <li>Weatherproof dual camera system (IP65) for flexible mounting solution</li>
    <li>Two separately connected, discreet miniature sensor modules</li>
    <li>Image sensor and microphone integrated directly into the sensor module</li>
    <li>Double Hemispheric equipment replaces up to eight cameras</li>
    <li>Integrated DVR functionality: Slot for MicroSD card (up to 64 GB)</li>
    <li>Functional expansion via MiniUSB and MxBus connector</li>
    <li>S15M &amp; S15 Hemispheric: Available July 2013</li>
    <li>S14 sensor modules cannot be used with S15 models (and vice versa)</li>
    </ul>
    </div></div>

Answer 1

看看这个小提琴

http://jsfiddle.net/DuChs/

问题是，如果其中一个高度为height，则无法将转场应用于auto。通过使用max-height代替（并将其设置为大于您要显示的内容），您将获得所需的结果。

.f1{
    max-height:0px; 
    overflow:hidden; 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease ;
}
.pic1:hover .f1{
    max-height: 500px;
}

Answer 2

高度：auto不适用于过渡。您有三种选择：

使用max-height值的过渡。放置静态高度而不是高度：auto。例如身高：100px;

.pic1:hover .f1{
  height:100px;
}

像这样使用CSS3 ScaleY属性

   #child0 {
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);

    -webkit-transform-origin: top; 
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    overflow: hidden;
    background-color: #dedede;

    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}

#parent0:hover #child0 {
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}

问候。

为什么css3过渡高度不会缓和进出

2 个答案: