事件 - htmx:beforeTransition

htmx:beforetransition 是 HTMX 提供的事件之一，它在 HTMX 执行页面内容过渡动画（transition）之前触发。这个事件允许你在元素即将被过渡时，插入自定义逻辑，比如添加类名、取消动画或修改数据。

事件参数

• detail.elt - 发送请求的元素
• detail.xhr - XMLHttpRequest
• detail.requestConfig - AJAX请求的配置
• detail.shouldSwap - 是否交换内容（非 200 响应代码的默认值为 false ）
• detail.target - 交换的目标

事件说明

属性	说明
事件名	htmx:beforetransition
触发时机	在 swap 动画（如 fade、scroll、none 等）执行前
可取消（cancelable）	是的，调用 event.preventDefault() 可阻止过渡执行
常见用途	自定义动画准备、条件阻止过渡、添加过渡类等

示例：在过渡前添加类名

<div id="content" hx-get="/new-content" hx-target="#content" hx-swap="outerHTML transition:true">
  点击我加载内容
</div>

<script>
  document.body.addEventListener("htmx:beforetransition", function (event) {
    console.log("即将发生过渡动画：", event.detail);
    
    const target = event.detail.target;
    target.classList.add("fade-out"); // 添加自定义 CSS 动画准备类
  });
</script>

这个事件通常会配合 hx-swap="transition:true" 使用。

阻止过渡动画

document.body.addEventListener("htmx:beforetransition", function (event) {
  const shouldSkip = someLogicCheck();
  if (shouldSkip) {
    event.preventDefault(); // 阻止过渡动画
  }
});