html - 在转换过程中隐藏文本(即缩放)，使其仅在转换结束后可见，同时保持文本大小不变

Question

请原谅这个基本问题。我用 transform: scale(6.5) 构建了一个在 :hover 上扩展的圆。在圆圈内，我希望在转换完成之前隐藏文本。此外，文本大小需要保持不变(即没有转换)。我已经尝试过 transform: unset !important; 并尝试使用 visibility 但它们并没有像我希望的那样发挥作用。感谢您的帮助。

// this block works as expected
.expand {
  transition: transform .8s;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  margin: 0 auto;
}

// this block works as expected
.expand:hover {
  transform: scale(6.5);
}

.no-expand {
  width: 100px;
  visibility: hidden;
}

.no-expand:hover {
  transition: transform .8s;
  visibility: visible;
  transform: unset !important;
}

<div>
  <div class='expand'>
    <div class='no-expand'>
      This is a circle
    </div>
  </div>
</div>

Answer 1

这是使用纯 CSS 实现的方法。只需应用相反大小的比例来保持文本大小相同，并使用 flex 将其居中。

编辑:如果您希望在悬停和退出悬停区域时使用相同的过渡，您可以移动 transition: transform .8s; 以在 div 级别应用(在此case .circle 类)。

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.circle {
  background-color: green;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .8s;
}

.circle:hover {
  transform: scale(6.5);
}

.circle:hover .no-expand {
  transition: visibility 0.8s linear 0.8s;
  visibility: visible;
  transform: scale(0.154); // roughly 1/6.5
}

.circle .no-expand {
  visibility: hidden;
}

<div class="center">
  <div class='circle'>
    <div class='no-expand'>
      This is a circle
    </div>
  </div>
</div>