HTML | DOM TransitionEvent propertyName 属性介绍

什么是 TransitionEvent?

TransitionEvent 是一个 DOM 事件的接口，用于描述在进行 CSS transition 动画过程的中间状态。当 CSS transition 动画在元素上触发时，就会触发 TransitionEvent。

propertyName 属性是什么?

propertyName 属性返回正在进行中的 transition 的属性名称。在场景中，可以定义多个属性并使用逗号分隔。在 TransitionEvent 中，propertyName 就是指正在进行中的 transition 的属性名称。

例如，如果 CSS 中使用以下定义：

transition: background-color 2s linear, color 2s linear;

则 如果 TransitionEvent 触发，propertyName 可以返回“background-color” 或 “color”。

如何使用 propertyName 属性?

可以在事件处理程序中使用 propertyName 属性，对特定属性进行单独处理。例如，可以通过监听 propertyName 的变化来决定在 transition 结束后执行什么操作。

下面是一个例子，当 transition 结束时，根据 propertyName 执行不同的操作：

function handleTransitionEnd(event) {
  if (event.propertyName === "color") {
    // 处理 color transition 结束时的操作
  } else if (event.propertyName === "background-color") {
    // 处理 background-color transition 结束时的操作
  }
}

propertyName属性应用场景

propertyName 属性在实现复杂动画效果时非常有用。例如，在实现导航栏下拉动画效果时，可以使用 TransitionEvent 和 propertyName 属性将导航栏的高度和背景色逐渐过渡为全屏幕高度和白色背景。

.navbar {
  transition: height 0.5s ease, background-color 0.5s ease;
}

function handleNavTransitionEnd(event) {
  if (event.propertyName === "height") {
    // 导航栏高度过渡完成的操作
  } else if (event.propertyName === "background-color") {
    // 导航栏背景色过渡完成的操作
  }
}

总结

通过使用 propertyName 属性，可以更加灵活地控制并监测 CSS transition 动画过程中的特定属性。它可以帮助开发者在处理复杂动画效果时更加高效地编写代码。