Question

简而言之，我有一个带有较暗底边的按钮，并且在悬停时，我希望按钮向下移动一点并缩小边框（以产生按下它的效果）。

然而，它在动画时会略微抖动，完全消除按钮“按下”的感觉。

这是一个 Fiddle ，以及相关的CSS来证明这个问题：

.btn {
  color: grey;
  background: lightgrey;
  border: 0 rgba(0, 0, 0, .1) solid;
  border-bottom-width: 4px;
  font-family: sans-serif;
  padding: 10px;
  position: relative;
  text-decoration: none;
  top: 0;
  transition: all 250ms;
}

.btn:hover {
  top: 2px;
  border-bottom-width: 2px;
}

为了简单起见，我在这里没有使用像-webkit这样的前缀。

主要问题是底部边界。按钮向下滑动很好，但边框似乎做了不同的事情（并且不顺畅）。

这里有什么想法吗？

Answer 1

尝试用top替换transform: translateY(2px)转换，同时用::before伪元素替换底部边框并为其scale属性设置动画：

https://jsfiddle.net/qjfstq1c/1/

.btn, .btn:before {
   transition: all 250ms;
   transform-origin: top center;
 }
.btn {
  display: inline-block;
  color: grey;
  background: lightgrey;
  font-family: sans-serif;
  padding: 10px;
  position: relative;
  text-decoration: none;
}
.btn:before {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  border-top: 4px solid #bebebe;
}
.btn:hover {
  transform: translateY(2px);
}
.btn:hover:before {
  transform: scaleY(.5);
}

CSS在多次更改期间过渡闪烁

1 个答案: