动画

htmx 旨在让你使用仅使用 CSS 和 HTML 即可为你的网页添加流畅的动画和过渡。以下是各种动画技术的几个示例。

htmx 还允许你使用新的 视图转换 API 来创建动画。

使用视图转换 API

htmx 通过 transitionhx-swap 属性选项提供对新的 View Transitions API 的访问。

下面是使用视图转换的交换示例。转换通过 CSS 中的 view-transition-name 属性与外部 div 绑定，并且该转换根据 ::view-transition-old 和::view-transition-new 定义，用于 @keyframes 定义动画。（有关视图转换 API 的详细信息，请参阅 Chrome 开发者页面。）

此过渡的旧内容应向左滑出，新内容应从右侧滑入。

请注意，截至撰写本文时，视觉转换仅发生在 Chrome 111+ 上，但预计在不久的将来会有更多浏览器实现此功能。

<style>
   @keyframes fade-in {
     from { opacity: 0; }
   }

   @keyframes fade-out {
     to { opacity: 0; }
   }

   @keyframes slide-from-right {
     from { transform: translateX(90px); }
   }

   @keyframes slide-to-left {
     to { transform: translateX(-90px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
   ::view-transition-new(slide-it) {
     animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }
</style>


<div class="slide-it">
   <h1>Initial Content</h1>
   <button class="btn primary" hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
     Swap It!
   </button>
</div>

演示

Initial Content