Question

将鼠标悬停在按钮上后，按钮所在的扩展容器出现问题。它振动，是什么让它看起来非常糟糕。理想情况下修复只使用CSS，因为我也将这些样式用于表单的提交按钮。

有关如何改进它的任何建议？

<div class="button-container">
  <a class="button" href="#">Text</a>
</div>


.button-container {
background: red;
}
.button {
background:#fff;
font-size:1em; 
padding:18px 26px; 
display:inline-block; 
margin:5px; 
border-radius:6px; 
border:solid rgba(0,0,0,0.2); 
border-width:1px 1px 5px; 
box-shadow:0 5px 0 rgba(0,0,0,0.1), inset 0 0 2px rgba(255,255,255,0.3); 
cursor:pointer; 
user-select:none; 
transition:0.4s ease; 
min-width: 10em;
margin-top: 3px;
}

.button:hover {
margin-top: 0;; 
box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); 
border-bottom-width:8px; 
margin-top: 0px;
}

.button:active {  
box-shadow:0 2px 0 rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.4); 
border-bottom-width:2px; 
transition:0.1s ease;
margin-top: 7px;
}

Answer 1

如果您将按钮置于绝对位置，则不会影响容器尺寸：

.button {
  position: absolute;
}
.button-container {
  height: 68px; /* ensure the container still has the same size */
}

Answer 2

这种情况正在发生，因为.button-container的高度取决于按钮的高度和边距，并且当您在悬停.button-container上减少边距时会受到影响。另一件事是这个动画的过渡时间太长，所以有振动效果正是因为时间很长

您需要做的是将修复高度设置为.button-container并将0.4s缩减为0.3s

＆＃13;

.button-container {
  background: red;
  height:68px;
}
.button {
    background:#fff;
    font-size:1em; 
    padding:18px 26px; 
    display:inline-block; 
    margin:5px; 
    border-radius:6px; 
    border:solid rgba(0,0,0,0.2); 
    border-width:1px 1px 5px; 
    box-shadow:0 5px 0 rgba(0,0,0,0.1), inset 0 0 2px rgba(255,255,255,0.3); 
    cursor:pointer; 
    user-select:none; 
    transition:margin ease 0.3s; 
    min-width: 10em;
    margin-top: 3px;
  
    }

    .button:hover {
    margin-top: 0;; 
    box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); 
    border-bottom-width:8px; 
    margin-top: 0px;
      
    }

    .button:active {  
    box-shadow:0 2px 0 rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.4); 
    border-bottom-width:2px; 
    transition:0.1s ease;
    margin-top: 7px;
    }

＆＃13;

<div class="button-container">
  <a class="button" href="#">Text</a>
</div>

＆＃13;

Answer 3

在你的过渡时，你需要一个需要动画的属性：

  transition: all .2s linear;

在您的情况下使用all，因为您有多个需要动画的属性。我将缓和更改为linear ...我不记得ease。请参阅：https://jqueryui.com/easing/。对不起，我忘了提到jQuery只有2个缓动：线性和摆动。如果你想要任何更好的东西，请尝试GSGD或jQueryUI（jQuery链接是一个自定义的包，它应该是使用所有可用缓动所需的最小组件。

http://codepen.io/zer00ne/pen/mEeaRm?editors=0100

Answer 4

你造成了browser reflows，价格昂贵并且改变了每个动画步骤的布局，导致了生涩和抖动。

更新样式中的以下内容以减少重排：

＆＃13;

.button{
   transition: margin-top 0.4s ease-in, border-width 0.4s linear, box-shadow 0.4s ease-in;
  }

.button:hover {
   margin-top: 0px;
   box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); 
   border-width:1px 1px 8px; 
  }

＆＃13;

transtion属性 ease-in 指定慢启动的过渡效果，其中线性指定从开始到结束具有相同速度的过渡效果。

平滑按钮转换

4 个答案: