css中transition方法的介绍

transition用于实现CSS属性的平滑过渡，需设置property、duration、timing-function和delay；常用于:hover等状态变化，触发颜色、位置等动画效果，提升交互体验。

在CSS中，transition 属性用于控制元素从一种样式平滑过渡到另一种样式的效果。它可以让颜色、大小、位置、透明度等属性的变化不再突兀，而是以动画的形式缓慢呈现，从而提升用户体验。

transition 的基本语法

transition 是一个简写属性，可以同时设置以下四个子属性：

• transition-property：指定要应用过渡效果的CSS属性，比如 width、opacity、transform 等。设为 all 表示所有可动画属性都参与过渡。
• transition-duration：定义过渡持续的时间，单位为秒（s）或毫秒（ms）。必须设置，否则过渡无效。
• transition-timing-function：定义过渡的速度曲线，如 ease、linear、ease-in、ease-out、cubic-bezier() 等。
• transition-delay：指定过渡开始前的延迟时间。

完整写法示例：

div {
  transition: margin-left 0.5s ease-in 0.1s;
}

常用写法与示例

实际开发中，通常只关心持续时间和速度函数，其他使用默认值。

• 只设置持续时间：
  transition: 0.3s;
  默认会对所有可动画属性生效，速度为 ease。
• 多个属性分别过渡：
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

常见应用场景：按钮悬停变色、菜单展开收起、图片淡入淡出等。

触发条件与注意事项

transition 不会自动播放，必须依赖状态变化才能触发，最常见的就是 :hover、:focus、:checked 或通过 JavaScript 添加/移除 class。

• 只有发生了属性值的变化，并且该属性支持动画，才会触发动画。
• 不是所有CSS属性都能过渡，可参考 MDN 可动画属性列表。
• 过渡是从“当前值”到“目标值”，如果中间没有明确的初始值，浏览器可能无法计算中间帧，导致动画失效。

transitionend 事件

当过渡动画结束时，会触发 transitionend 事件，可用于JavaScript中执行后续操作。

element.addEventListener('transitionend', function(e) {
  console.log('过渡完成:', e.propertyName);
});

基本上就这些。合理使用 transition 能让界面更自然流畅，但不宜滥用，避免影响性能和用户感知。不复杂但容易忽略细节。