alpine.js 的 x-transition 指令仅支持与 x-show 配合使用，无法直接作用于 x-bind 触发的属性变更（如 src）；要实现图片切换的过渡动画，需改用条件渲染 + x-show + x-transition 的组合方案。
在 Alpine.js 中，x-transition 的设计初衷是控制元素的显隐状态过渡，其底层依赖 x-show 对 display 样式的切换，并配合 CSS 类（如 enter, leave 等）实现动画。而 x-bind:src 仅更新 DOM 属性，不触发显示/隐藏的生命周期，因此直接在其上添加 x-transition 不会产生任何效果——这并非 Bug，而是指令职责的明确划分。
✅ 正确做法：用两个 <img> 元素分别代表“悬停态”和“默认态”，通过 x-show 控制其显隐，并为二者均添加 x-transition：
<div x-data="{ hover: false }" class="h-3/5 mb-2" @mouseleave="hover = false">
<div @mouseover="hover = true">
<!-- 悬停时显示的图片 -->
<img
x-show="hover"
class="h-full m-auto"
src="/src/variants/1.jpg"
alt="Hover image"
x-transition:enter="transition-opacity duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
<!-- 默认状态图片 -->
<img
x-show="!hover"
class="h-full m-auto"
src="/src/variants/0.jpg"
alt="Default image"
x-transition:enter="transition-opacity duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
</div>
</div>? 关键要点：
- 使用布尔状态（如 hover）驱动 x-show，而非数字索引（避免冗余逻辑）；
- 两个 <img> 必须共存于同一容器内，且尺寸样式一致，确保视觉无缝切换；
- 显式声明 x-transition:* 参数可精准控制入场/离场动画（示例中使用淡入淡出，你也可替换为缩放、位移等）；
- 若需更复杂的多图轮播，建议封装为组件或结合 x-for + 状态管理，但务必仍以 x-show 为基础。
⚠️ 注意事项：
- 不要尝试对单个 <img> 同时绑定 x-bind:src 和 x-transition——它不会生效；
- 确保 Alpine.js 已正确加载（推荐使用 defer 加载）；
- 过渡类名需与项目 CSS 框架（如 Tailwind）兼容；若自定义 CSS，需确保 transition 属性及关键帧定义完整。
通过这种结构化思路，你不仅能解决图片过渡问题，更能深入理解 Alpine.js 响应式指令的设计哲学：状态驱动视图，指令各司其职。
