css - 设置div高度的css动画

Question

我想知道是否可以使用 CSS 动画设置 div 的高度。我有一个 div，当你将鼠标悬停在它上面时，它会打开，但我希望它保持那个高度而不是缩回到原来的高度。这可能吗？它需要在纯 css 而不是 javascript 中完成，因为它是一个大学网站

Answer 1

是的，仅使用 CSS3 即可，但仅适用于 Safari/Chrome 和最新版本的 Opera、Mozilla Firefox 和 IE10，因为您需要 CSS3 动画关键帧来保留过渡的最终状态。

http://jsfiddle.net/rPc88/3/

Answer 2

你应该使用 jQuery。并非所有浏览器都支持 CSS3。但是，可以使用 CSS3 来实现这一点。

CSS：

#myDiv {
    height:20px;/* initial height */
    width:100px;
    background:#aaa;
    -webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
    -moz-transition: height .4s linear;
    -o-transition: height .4s linear;
    -ms-transition: height .4s linear;
    transition: height .4s linear;
}

#myDiv:hover {
    height:100px; /* desired height */
}

HTML：

<div id="myDiv">
    Hello World!
</div>

希望这可以帮助。

编辑：对不起，我没有看到你需要它来保持那个高度。为了做到这一点，您需要使用类似 onmouseout（或另一个事件监听器）之类的东西，最终还是会使用 Javascript。

Answer 3

你可以这样做： -

HTML：

<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>​

CSS：

.divAnimate {
    border: 1px solid;
}
.divAnimate:hover {
    height: 200px;
}
.setHeight {
    height: 200px;
    border: 1px solid;
}

参考现场演示