CSS转换scalex线不一致的高度

Question

我在链接上有一个悬停动画。在文本下方画一条线。高度为2px。问题是它开始于一个高度，然后继续至另一个高度。

• 为什么这么做？它不需要计算任何内容，因为2px是固定数字。
• 我该如何解决？

动画GIF是在Chrome中拍摄的。

:root {
  --cp-500: #c53e3a;
  --cp-700: #8d1d2d;
  --cp-800: #721228;
}

.action a {
  background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
  color: #fff;
  border-radius: 100vh;
  padding: .5rem 2rem;
  display: inline-block;
  border: 1px solid var(--cp-700);
  transition: box-shadow 150ms ease-in;
  box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
  z-index: 1;
  text-decoration: none;
  position: relative;
 }

.action a:hover {
  box-shadow: 0 1rem 1rem -1rem var(--cp-800);
  background: var(--cp-700);
}

.action a:before {
  content: '';
  position: absolute;
  bottom: .5rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: 2px;
  background: var(--cp-500);
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 1000ms ease-in;
  z-index: -1;
}

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1);
}

<div class="action">
   <a href="#">Test</a>
 </div>

Answer 1

您提到，当您的浏览器大小为125%时，会发生此行为。我还可以重现此行为并进行了很多测试，包括height和max-height之类的属性，这些属性什么都没有影响。

scaleX似乎是主要问题，并且由于使用的浏览器大小增加了，因此，仅在此特定浏览器大小（或大于125％的浏览器大小）中，此行为才可见。因此，它在100％时也可能会表现出这种效果，但由于2px太小而无法用人眼看到，因此无法看到。

因此，我还在scaleY(1.2)的transform:上添加了.action a:hover:before，以防止出现这种抖动行为。

:root {
  --cp-500: #c53e3a;
  --cp-700: #8d1d2d;
  --cp-800: #721228;
}

.action a {
  background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
  color: #fff;
  border-radius: 100vh;
  padding: .5rem 2rem;
  display: inline-block;
  border: 1px solid var(--cp-700);
  transition: box-shadow 150ms ease-in;
  box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
  z-index: 1;
  text-decoration: none;
  position: relative;
 }

.action a:hover {
  box-shadow: 0 1rem 1rem -1rem var(--cp-800);
  background: var(--cp-700);
}

.action a:before {
  content: '';
  position: absolute;
  bottom: .5rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: 2px;
  background: var(--cp-500);
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 1000ms ease-in;
  z-index: -1;
}

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(1.2);
}

<div class="action">
   <a href="#">Test</a>
 </div>

Answer 2

我还能够重现您的问题。正如上面提到的AlexioVay，您还应该添加scaleY。但这还不够，您应该将scaleY设置为与scaleX几乎相同。现在，这条线从起点到终点都具有相同的高度。看到此代码：https://jsfiddle.net/q236tmuk/30/

我在您的CSS中添加了以下更改：

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(0.99);
}

以下情况也将很好地工作：

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(1.01);
}

悬停时，线的高度从开始到结束都是相同的。不要对scaleX和scaleY使用相同的值，因为那样的话，高度将在变换事件之后改变。这是浏览器问题。唯一的解决方案是对scaleY使用较小的不同值。