html - CSS +/- x 像素的宽度和高度动画

Question

有什么方法可以为 div 设置动画（最好不使用 javascript），使其在宽度/高度上增加或减少 5px？我的意思不是使用scale(0.95)orzoom: 95%因为这取决于 div 的原始大小，我希望始终准确更改 5px。

Answer 1

没有 jQuery

• 要求height增量div是已知的，而不是假定的。

div.growable {
    background: red;
   color: white;
   -webkit-transition: height 200ms ease-in-out;
   height: 100px;
}
div.growable:hover {
   height: 105px;
}

小提琴：http: //jsfiddle.net/Xh4vC/

使用 jQuery

• 允许更改height为现有值的增量或减量，而不关心该值是什么。

$(function(){
    $('#growDiv').click(function(){
        $('div.growable-js').animate({'height' :'+=5px'}, 200);
    });
   $('#shrinkDiv').click(function(){
       $('div.growable-js').animate({'height': '-=5px'}, 200);
    });
});

小提琴：http: //jsfiddle.net/Xh4vC/

Answer 2

不需要 div 大小...

http://jsfiddle.net/5rDar/4

div {
    width: 200px;
    height: 200px;
    background-color: #eee;
    transition: padding .5s;
    padding: 10px;
}
div:hover {
    padding: 15px;
}

这是主 div 不转换但父 div 转换的变体。根据您的情况，这可能更有用。

http://jsfiddle.net/5rDar/3

div.outer {
    transition: padding .5s;
    padding: 10px;
    position: relative;
}
div.outer:hover {
    padding: 15px;
}
div.inner {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    position: absolute;
}

<div class="outer">
    <div class="inner">
    </div>
</div>