CSS Height 过渡动画导致文本抖动：原因与解决方案

本文探讨了在使用 CSS height 属性进行过渡动画时，当计算后的 line-height 为小数时，可能导致文本抖动的现象。分析了抖动产生的原因，并提供了避免或减轻此问题的几种实用方法，包括使用整数 line-height、调整过渡函数等。

问题描述

在使用 CSS 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>

对应的 CSS 样式：

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

.hover:hover {
  height: 100px;
}

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

当鼠标悬停在 .hover 元素上时，其高度会从 20px 过渡到 100px。此时，.shake 元素内的文本可能会出现抖动。

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

原因分析

文本抖动的原因是多方面的，主要与以下因素有关：

1. 小数 line-height 的影响： 当 line-height 计算结果为小数时（例如，font-size: 15px; line-height: 1.3; 计算结果为 19.5px），浏览器在渲染文本时需要进行像素取整。

2. 过渡动画的步长： 使用 ease 等过渡函数会导致高度在过渡期间产生非整数的步长值。

   

   Stylar

   多功能一站式AI图像生成、设计、编辑平台

   下载

3. 像素取整的差异： 在过渡的每一帧，文本的位置都需要根据当前的高度值和 line-height 进行计算。由于 line-height 是小数，且高度也在不断变化，浏览器在计算每个文本行的位置时可能会采用不同的取整方式（向上取整或向下取整），导致文本行在垂直方向上发生微小的跳动，从而产生抖动现象。

解决方案

以下是一些可以避免或减轻文本抖动的方法：

1. 使用整数 line-height： 这是最简单有效的解决方案。尽量使用整数值作为 line-height，或者调整 font-size 和 line-height 的比例，使得计算结果为整数。

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

2. 使用 steps() 过渡函数： steps() 函数可以将过渡动画分解为一系列离散的步骤，避免出现小数的高度值。

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

3. 调整过渡的起始和结束高度： 确保过渡的起始和结束高度是整数，并且差值是 line-height 的整数倍。这样可以减少过渡期间出现小数高度值的可能性。

4. 使用 transform: translate() 进行动画： 避免直接修改 height 属性，而是使用 transform: translate() 来模拟高度变化。translate 属性通常具有更好的性能和更少的抖动。

   .hover {
     height: 20px;
     overflow: hidden;
     transition: transform 1s ease;
     transform: translateY(0);
   }
   
   .hover:hover {
     transform: translateY(-80px); /* 假设高度变化为 80px */
   }

总结

在使用 CSS height 属性进行过渡动画时，文本抖动是一个常见的问题。通过理解抖动产生的原因，并采取相应的解决方案，可以有效地避免或减轻此问题，提升用户体验。 建议优先考虑使用整数 line-height，如果无法避免小数 line-height，则可以尝试使用 steps() 过渡函数或 transform: translate() 来替代 height 属性的直接修改。