CSS Transition属性不起作用

Question

我对css过渡属性有疑问，有人可以帮帮我吗？

HTML：

<div>HOVER ME
    <div class="slide">aaa <br />
         aaa <br />
        aaa <br />
        aaa <br />
    </div>
</div>

CSS：

.slide {
    height: 0px;
    visibility: hidden;
    width:100px;
    background-color: blue;
    -webkit-transition: height 2s ease;
    transition: height 2s ease;
}

div:hover > .slide {
    height: auto;
    visibility: visible;
}

Codepen：http://codepen.io/anon/pen/VLEGYr

Answer 1

如上所述，它不会使用display属性。此外，高度：自动的动画也不会起作用。显示较少且高度：以下自动减少版本。

.slide {
  max-height: 0;
  transition: max-height 0.2s;
  overflow: hidden;
  background-color: blue;
}

*:hover > .slide {
  max-height: 500px;
  transition: max-height 0.2s;
}

Answer 2

试试这个：

.slide {

  max-height: 0;
  width:100px;
  background-color: white;
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

div:hover > .slide {
  max-height: 200px;
  background-color: blue;
}

<div>HOVER ME
<div class="slide">aaa <br />
  aaa <br />
  aaa <br />
  aaa <br />
  </div>
</div>

http://jsfiddle.net/bqef5kpm/1/