Question

我有一个方形包装纸，里面有一个圆形，就像在小提琴上一样

https://jsfiddle.net/Lazarus97/3bntmd8g/1/

<div class="card">
    <div class="circle">
        <p>
            SOME
            <br>
            Text Test
        </p>
    </div>
</div>

<style>
body {
  display: flex;
  min-width: 100vw;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.card {
  width: 200px;
  height: 200px;
  background: #eee;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.circle {
  background: red;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transform: translateY(80px) scale(1);
  transition: transform .3s ease-in; /* SAME AS ITS CHILD */
}

.circle:hover {
  transform: translateY(0px) scale(3);
}

.circle * {
    transition: transform .3s ease-in; /* SAME AS ITS PARENT */

}

.circle:hover *{
  transform: scale(0.333333333); /* I got this number like this -->  1 / scale(3)  1/3 = 0.333333333 */
}

</style>

但是请注意，即使我正确地进行了数学运算并创建了相同的过渡缓和动作，但当您将鼠标悬停在圆圈上时，圆圈内的文本将如何跳跃，它又变大又变小。

在过渡过程中，它应该保持原始大小。

有人知道为什么会这样吗？有没有办法解决这个问题？

我尝试通过不同的过渡缓动动作对其进行修复。

Answer 1

“ ...为什么会这样...” ：

.circle的内容的大小与.circle的大小相同。这意味着您正确地计算出，在过渡结束时，如果圆圈大3倍，则内容必须小3倍才能保持原始大小。但是，在过渡期间，过渡时为0.5（在您的情况下为0.15秒）-圆是其原始大小的2倍，而圆的内容小了1/3（即2/3 =0.6̅），但是还可以因为它与圆成比例，所以大2倍（因此实际上是4/3 =1.3̅）。

“ ...有办法解决此问题...” ：

您需要使这两个对象独立，或者找到等式来计算内容在每个时间点需要多大才能与原始大小完全相同（如果它与父对象一起缩放），然后应用结果将成为animation属性，且每个百分比为@keyframes。但这并不完美，并且可能会在速度较慢的设备上产生结巴的影响。

Answer 2

首先，当您缩放元素时，将缩放其所有内容，并且正在执行两个动画，两个动画均以：hover启动，并且都易于移动，从而增加了效果，您可以轻轻地减小最大比例然后将第二个动画转为线性，可以隐藏很多效果，但仍然不是最好的。

.circle:hover {
  transform: translateY(0px) scale(2);
}

.circle * {
    transition: transform .3s linear; /* SAME AS ITS PARENT */    
}

您也应该减小最小标度。

.circle:hover *{
  transform: scale(0.5);
}

如果您决定仍然使用scale（3），则可以使用calc（）来达到最佳匹配。

.circle:hover *{
  transform: scale(calc(1/3));
}

CSS-跳跃规模过渡问题

2 个答案: