Question

所以我正在做CSS，我已经开始设计我的输入和放大器了。纽扣。我有一个设置，按钮的底部边框更宽，单击按钮缩短边框并向下移动按钮，创建一个伪3D“推”效果。问题是，当我按下按钮时，它下面的内容会向上移动。这不应该发生，因为（根据我的理解），按钮的底部是在同一个地方。我在按钮上启用了一个轮廓，它不会一直移动。然后，我想我可以通过增加底部边距来推回内容。这会在动画结束时将下面的内容保持在相同的距离，但在动画期间它会抖动，因此它仍然是次优的。

这是我的代码（我已经包含了一个带有和没有更改边距的按钮的示例）：

button {
    background-color:#f8f8f8;
    border: solid 1px #ccc;
    border-bottom:solid 3px #ccc;
    padding:4px;
    transition:border-width 0.2s ease, transform 0.2s ease, margin-bottom 0.2s ease;
    margin-bottom:4px;
    outline:solid 1px #000;
}
button:active {
    border-bottom-width:1px;
    transform:translateY(2px);
}
.margin-button:active {
    margin-bottom:6px;
}

<p>text</p>
<p><button>button with static margin</button></p>
<p>text</p>
<p><button class="margin-button">button with changing margin</button></p>
<p>text</p>

<小时/> 所以我的问题是：如何以不断变化的边距消除抖动，或者我是否可以采用完全不同的方式来实现更好的效果？

JSFiddle示例：http://jsfiddle.net/Cyoce/jknx5c66/

<小时/> 编辑：我忘记提到这一点了，但是我想在底部边框 - 或者用于重新创建/模拟它的任何东西 - 在悬停时改变颜色（在这种情况下，＃0af）。

Answer 1

您可以使用框阴影而不是边框，然后为框阴影和变换设置动画。

发生抖动是因为每次边框或边距发生变化时，都必须重绘页面，效率非常低。

为不触发重绘的属性（例如变换和边框）设置动画效果会更好。

以下是一个例子： http://codepen.io/TheDutchCoder/pen/ogdLQG

button {
  position: relative;

  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;

  background-color: #eee;

  transition: all 0.15s ease;

  box-shadow: 0 3px 0 0 #ccc;
}

button:focus,
button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 #ccc;
}

Answer 2

Reinier Kaper提出了一个很好的解决方案，并在answer很好地解释了它的优势。

但是，如果您坚持使用border-bottom（或类似）属性作为转换的核心，我知道我经常使用的两种可能的解决方法：

通过应用例如float: left或
将按钮的容器固定在一个固定的高度。

Working example on JSFiddle featuring both approaches.

作为一个站点节点 - 仅在我看来 - 应该避免让你的元素在鼠标手势上变慢：我建议在transition-duration: 0元素中添加:active属性：http://jsfiddle.net/jknx5c66/5/ < / p>

移动按钮推送内容

2 个答案: