在AlpineJS的x-bind上应用x-transition无效问题求助

你说得对，x-transition确实只对x-show、x-if这类控制元素显隐的指令起作用，直接通过x-bind切换图片src没法触发过渡效果。给你两种可行的解决思路：

方案一：双图片叠加+显隐过渡 #

把两张图片放在同一个容器里，通过x-show控制显示状态，搭配x-transition实现平滑切换：

<div x-data="{ hovered: false }" class="h-3/5 mb-2 relative">
  <!-- 默认显示的图片 -->
  <img class="h-full m-auto" src="/src/variants/0.jpg" alt="" x-show="!hovered" x-transition>
  <!-- 悬停显示的图片 -->
  <img class="h-full m-auto absolute inset-0" src="/src/variants/1.jpg" alt="" x-show="hovered" x-transition>
  <!-- 用全屏透明层监听鼠标事件，避免图片切换干扰事件触发 -->
  <div class="absolute inset-0" @mouseenter="hovered = true" @mouseleave="hovered = false"></div>
</div>

两张图片通过绝对定位叠加，利用x-show的显隐切换触发x-transition的淡入淡出效果，透明层负责监听鼠标状态，避免图片切换时的事件丢失。

方案二：CSS过渡+图片加载监听 #

如果不想用双图片，可以通过控制图片透明度，结合加载事件实现过渡：

<div x-data="{ image: 0, opacity: 1 }" class="h-3/5 mb-2">
  <img 
    class="h-full m-auto transition-opacity duration-500"
    :src="`/src/variants/${image}.jpg`" 
    alt=""
    @mousemove="image = 1; opacity = 0"
    @mouseout="image = 0; opacity = 0"
    @load="opacity = 1"
    :style="{ opacity: opacity }"
  >
</div>

原理是：切换src前先把透明度设为0，等新图片加载完成（触发@load事件）后再恢复透明度为1，配合CSS的transition-opacity属性实现平滑过渡。

内容的提问来源于stack exchange，提问作者Nandril