CSS Height Transition 导致文本抖动的原因及解决方案

文章摘要：在使用 CSS height transition 时，如果计算后的 line-height 值为小数，可能会导致文本在过渡过程中出现抖动现象。本文将深入探讨这种现象产生的原因，并提供几种有效的解决方案，帮助开发者避免或减轻此类问题，从而实现更平滑的动画效果。

在使用 CSS height 属性进行过渡动画时，有时会观察到文本出现抖动现象，尤其是在调整包含文本的容器高度时。 这种抖动通常与计算后的 line-height 值为小数有关。 下面我们将深入探讨这个问题，并提供相应的解决方案。

问题分析

当 CSS 属性发生变化时，浏览器会重新渲染页面。 在 height 属性过渡过程中，浏览器会逐步调整元素的高度。 如果元素的 line-height 计算结果为小数（例如，font-size: 15px; line-height: 1.3; 计算得到 line-height: 19.5px），那么文本行的垂直位置也会是一个小数。

在每次渲染时，浏览器需要将这些小数像素值转换为实际的屏幕像素。 由于屏幕像素是整数，浏览器会进行四舍五入或取整操作。 这些取整操作可能导致文本行的位置在不同的渲染帧之间发生细微的跳动，从而产生抖动效果。

立即学习“前端免费学习笔记（深入）”；

更具体地说，transition-timing-function（例如 ease）通常使用贝塞尔曲线，导致高度变化的步长也是小数。 结合小数的 line-height，文本在视口中的渲染位置会因为取整而跳动，不同行的文本跳动模式不同，从而产生抖动感。

重现抖动问题的示例

以下代码展示了当 line-height 为小数时，文本抖动的现象：

<div class="hover">
  Hover over me<br>
  foo bar<br>
  foo bar<br>
  foo bar<br>
</div>
<p class="shake">
  I will shakeI will shakeI will shake <br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
</p>

.hover {
  height: 20px;
  overflow: hidden;
  transition: height 1s ease;
}

.hover:hover {
  height: 100px;
}

p {
  font-size: 15px;
  line-height: 1.3; /* 计算后的 line-height 为 19.5px */
}

将鼠标悬停在 .hover 元素上，观察 .shake 元素的文本是否出现抖动。

解决方案

以下是一些可以解决或减轻文本抖动问题的方法：

因赛AIGC

因赛AIGC解决营销全链路应用场景

73

查看详情

1. 使用整数 line-height 值： 这是最直接的解决方案。 尽量选择 font-size 和 line-height 的组合，使计算后的 line-height 为整数。 例如：

   p {
     font-size: 15px;
     line-height: 1.2; /* 计算后的 line-height 为 18px */
   }

   登录后复制

2. 使用 steps() 过渡函数： steps() 函数将过渡过程分解为一系列离散的步骤，而不是平滑的过渡。 这可以减少浏览器在过渡过程中进行小数像素计算的次数。

   .hover {
     height: 20px;
     overflow: hidden;
     transition: height 1s steps(100); /* 将过渡分解为 100 个步骤 */
   }

   登录后复制

   调整 steps() 中的数字以平衡平滑度和性能。

3. 使用 transform: translateZ(0) 或 backface-visibility: hidden： 这些 CSS 属性可以触发硬件加速，可能会改善渲染性能并减少抖动。

   p {
     transform: translateZ(0); /* 或 backface-visibility: hidden; */
   }

   登录后复制

   请注意，过度使用硬件加速可能会对性能产生负面影响，因此请谨慎使用。

4. 调整过渡持续时间： 较短的过渡持续时间可能会减少抖动的可感知性，但可能会使动画看起来不流畅。 较长的持续时间可能会加剧抖动。 尝试不同的持续时间，找到最佳平衡点。

总结

文本抖动是 CSS height 过渡中一个常见的问题，通常与小数 line-height 值和浏览器渲染机制有关。 通过使用整数 line-height 值、steps() 过渡函数、硬件加速或调整过渡持续时间，可以有效地解决或减轻此问题，从而创建更平滑、更专业的 Web 动画。 在实际开发中，应根据具体情况选择合适的解决方案。

以上就是CSS Height Transition 导致文本抖动的原因及解决方案的详细内容，更多请关注php中文网其它相关文章！