transform, transition你到底了解多少?

80 阅读1分钟

先举个例子:

1. transform: 'translate(-50%, -50%)'

  • 作用: 该行代码是用于定位元素的。

  • 解释: translate(-50%, -50%) 让元素相对于其自身的宽度和高度移动了 50%,具体而言,它将元素的中心点移动到其父元素的中心。

    • -50% 表示沿着 X 轴和 Y 轴分别移动元素自身宽度和高度的 50%。
    • 通常搭配 position: absolute 使用,将元素精确地定位到某个容器的中心位置。
  • 示例: 如果一个元素宽度为 100px,高度为 100px,translate(-50%, -50%) 会使该元素的左上角移动 50px,使得元素的中心对齐到其父容器的中心。

2. transition: 'background-color 0.3s ease'

  • 作用: 该行代码用于为元素的 background-color 属性添加过渡效果。

  • 解释: 这个 transitionbackground-color 属性的变化过程更平滑。

    • 0.3s 表示过渡的持续时间是 0.3 秒。
    • ease 是过渡的曲线函数,它表示从慢到快再到慢的过渡效果,使得视觉上更自然。
  • 示例: 当用户鼠标悬停在一个元素上时,如果该元素的 background-color 发生改变,使用 transition 就会让颜色变化在 0.3 秒内逐渐完成,而不是立即切换。

这两行代码通常是为了提升用户体验,让元素的视觉效果看起来更自然、平滑。