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

【问题标题】：CSS +/- x pixels for width and height animationCSS +/- x 像素的宽度和高度动画
【发布时间】：2013-03-23 02:18:33
【问题描述】：

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

【问题讨论】：

标签： html css css-animations

【解决方案1】：

没有 jQuery

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

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/

【讨论】：

您的无 JS 解决方案需要预定义的尺寸，不是吗？我不确定“身高增量”是什么意思。
@isherwood CSS 解决方案可以，是的，jQuery 解决方案不关心预定义的大小：'-=Npx' 和 '+=Npx'
我使用了height，因为这正是 OP 想要改变的。将填充添加到 div 会添加垂直空间，但不会更改高度值。

【解决方案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>

【讨论】：

谢谢！第一个成功了，但如果我要挑剔的话，我会指出像 5px 这样的小填充动画根本不会产生平滑的动画......
对我来说非常流畅。也许尝试更短的持续时间。
我发现 Safari 不是很流畅。 Firefox 和 IE10 像玻璃一样。