CODEWITHSUNDEEP
javascripthtmltailwind-cssalpine.js
Nandril
Nandril

Reputation: 107

Applying x-transition on x-bind alpinejs

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}" class="h-3/5 mb-2 " >
    <img class="h-full m-auto" x-bind:src="`/src/variants/${image}.jpg`" alt="" x-on:mousemove="image = 1" x-on:mouseout="image = 0" x-transition>
  </div>

Upvotes: 3

Views: 1196

Answers (1)

Nathan T.
Nathan T.

Reputation: 298

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}" class="h-3/5 mb-2" @mouseleave="hover=false">
  <div @mouseover="hover = true">
    <img x-show="hover" class="h-full m-auto" src="https://picsum.photos/id/237/200/300" alt="" x-transition>
    <img x-show="!hover" class="h-full m-auto" src="https://picsum.photos/id/238/200/300" alt="" x-transition>
  </div>
</div>

Upvotes: 1

Related Questions