Day8 - HTMX 過渡動畫效果

Genos
2023-09-23 23:42:09

CSS Transitions

當元素使用到 HTMX 的替換內容功能時，會自動加上已經寫好的 css transition 效果，不需要再用 JS 控制

以下為官方範例：

這是替換前的元素


原始內容

這是替換後的元素

新內容

這是替換後元素的 CSS 樣式

.red {
    color: red;
    transition: all ease-in 1s;
}

完成以上三個內容後，當 AJAX 完成並替換元素內容，就會套用 CSS transition 的效果

注意事項

1. 替換前和替換後的元素都要有一樣的 id 才能正常套用過渡效果，例如上方範例中原始的元素 id 是 #div1，替換後元素的 id 也要是 #div1

2. trasition 的 class 要放在新的元素上

更多動畫效果的範例可以參考 https://htmx.org/examples/animations/
參考資料 https://htmx.org/docs/#css_transitions