前端里面transform和transition 属性的区别

transform 和 transition 都是用于在 HTML 中控制元素的视觉效果和动画的 CSS 属性，但它们的作用和功能不同。下面详细解释这两个属性的区别：

1. transform 属性

transform 属性允许你对元素进行 2D 或 3D 转换（即对元素进行形状、位置、旋转、缩放等的改变）。它是一个即时生效的属性，会直接影响元素的显示方式。

常用的 transform 操作包括：

• translate()：移动元素的位置。
• rotate()：旋转元素。
• scale()：缩放元素。
• skew()：倾斜元素。
• matrix()：用于同时应用多个转换。

示例：

<div style="width: 100px; height: 100px; background-color: red; transform: rotate(45deg);">
  <!-- 这个 div 会旋转 45 度 -->
</div>

2. transition 属性

transition 用来定义元素的属性变化过程中，过渡效果（也叫动画）。通过 transition，你可以让元素的属性在一段时间内平滑地变化，而不是立即改变。

• transition 主要用于控制属性的变化如何进行动画过渡，它通常配合其他属性使用，比如 transform、opacity、color 等。
• 通过设置过渡的时长、延迟、时间函数等，可以实现平滑的动画效果。

transition 常用的几个属性：

• transition-property：定义哪些属性会参与过渡。
• transition-duration：定义过渡效果的持续时间。
• transition-timing-function：控制动画的速度曲线（比如线性、加速、减速等）。
• transition-delay：定义过渡动画的延迟时间。

示例：

<div style="width: 100px; height: 100px; background-color: red; 
    transition: transform 2s ease-in-out;">
  <!-- 这个 div 在过渡时，会平滑地旋转 -->
</div>

<script>
  // 使用 JavaScript 改变 transform 属性
  setTimeout(() => {
    document.querySelector('div').style.transform = 'rotate(45deg)';
  }, 1000); // 1秒后开始旋转，过渡时间为2秒
</script>

在这个例子中，div 的 transform 属性在 2 秒内平滑地从 0deg 过渡到 45deg。

transform 和 transition 的区别

特性	transform	transition
功能	用于立即改变元素的 位置、大小、旋转等。	用于为元素的属性变化添加平滑的 过渡效果。
应用	直接对元素应用变换效果，如旋转、缩放等。	用于控制当元素的属性值改变时，如何平滑过渡。
效果时间	变换立即生效。	通过设置 transition-duration 来指定动画的时间。
常用搭配	通常直接与具体的变换操作搭配，如 rotate()、translate()、scale()。	通常与 transform、opacity 等其他 CSS 属性一起使用。
示例	transform: rotate(45deg);	transition: transform 2s ease-in-out;

结合使用 transform 和 transition

最常见的使用场景是将 transition 和 transform 一起使用，使得元素在转换时能够平滑地动画过渡。例如，鼠标悬停时改变元素的位置或大小：

示例：平滑的缩放效果

<div style="width: 100px; height: 100px; background-color: red;
            transition: transform 0.3s ease-in-out;">
  <!-- 这个 div 会在鼠标悬停时平滑地缩放 -->
</div>

<script>
  document.querySelector('div').addEventListener('mouseover', () => {
    document.querySelector('div').style.transform = 'scale(1.5)';
  });

  document.querySelector('div').addEventListener('mouseout', () => {
    document.querySelector('div').style.transform = 'scale(1)';
  });
</script>

在这个例子中，div 会在鼠标悬停时平滑地放大 1.5 倍，鼠标移开时恢复原状，整个过程持续 0.3 秒。

总结：

• transform：用于立即对元素进行位置、旋转、缩放等变换。
• transition：用于设置元素属性变化时的过渡效果，使得属性变化更平滑。

通常你会将 transition 和 transform 配合使用，以便实现平滑的动画效果。