Applying x-transition on x-bind alpinejs-CodePudding

I did a little snippet where the image changes when you hover over it using x-bind, the change is very prompt so I wanted to add some transitions to it but it's not working. It seems x-transition might only work with x-show.

  <div x-data="{image : 0}"  >
    <img  x-bind:src="`/src/variants/${image}.jpg`" alt="" x-on:mousemove="image = 1" x-on:mouseout="image = 0" x-transition>
  </div>

CodePudding user response：

The documentation of x-transtion only talks about x-show. So it indeeds only works for x-show but why can't you use x-show? Hide the image with id 0 on hover and show the other image. Using x-transition on both of them?

Below a small example, you would still have to finetune this to your requirements offcourse. But x-transition works!

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{hover : false}"  @mouseleave="hover=false">
  <div @mouseover="hover = true">
    <img x-show="hover"  src="https://picsum.photos/id/237/200/300" alt="" x-transition>
    <img x-show="!hover"  src="https://picsum.photos/id/238/200/300" alt="" x-transition>
  </div>
</div>