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

请原谅基本问题。我建立了一个用:hover在transform: scale(6.5)上扩展的圆。在圆内，我想隐藏文本，直到转换完成。另外，文字大小需要保持不变（即不进行任何转换）。我已经尝试过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>

最佳答案

这是使用纯CSS的方法。只需应用相反大小的比例尺即可保持文本大小不变，并使用flex使其居中。

编辑：如果要在悬停并退出悬停区域时进行相同的过渡，则可以将transition: transform .8s;移动到div级别（在本例中为.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>

关于html - 在转换过程中隐藏文本(即缩放)，使其仅在转换结束后可见，同时保持文本大小不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51619209/