Combine with Tailwind hover:scale-x

[florian-lefebvre]

Hi, I use Vue for my project. When I use the appear-visible property on the XyzTransition component and I have hover:scale-105 class applied to a div, hovering it does not apply the duration during the xyz animation.
For example, try hovering over a grey box under "L'histoire d'yNotes" at https://ynotes.fr/ during the fade animation.
How can I fix that ?

[mattaningram]

Hey @florian-lefebvre sorry just seeing this now.

So to be clear, when you hover the gray boxes the scale-105 happens instantly instead of having a transition right? I'm not sure there is an ideal way to fix this in terms of having the transition work during the animation since they are both trying to modify the transform property, so it might require applying the hover:scale-105 class after the animation is done.

[milesingrams]

Another possibility might be to add the style property animation: none; during hover. Tailwind has a class .animate-none that might have a hover variant (although you may need to add it) hover:animate-none.

[florian-lefebvre]

.animate-none didn't work, even associated with !important @milesingrams.
So as you suggested @mattaningram, I found a workaround. I created a component to check when the animation is done.

HoverableAnimated.vue

<template>
  <div class="xyz-nested" ref="el">
    <slot />
  </div>
</template>

<script>
export default {
  props: ["endClass"],
  mounted() {
    let el = this.$refs.el;
    el.addEventListener("animationend", () => {
      el.classList.remove("xyz-nested");
      el.classList.add(this.$props.endClass);
    });
  }
};
</script>

And I use it like:

<HoverableAnimated
v-for="(e, i) in skills"
:key="i"
xyz="delay-8 small fade stagger-2 ease-out-back"
class="flex justify-center px-6 py-8 transition-transform transform bg-gray-300 cursor-default md:py-10 dark:bg-gray-900 rounded-2xl"
endClass="md:hover:scale-105"
>
    <div class="flex flex-col items-center space-y-2">
        <component
            :is="e.icon"
            class="w-8 h-8 text-gray-600 fill-current dark:text-gray-400"
         ></component>
         <div class="text-lg font-semibold text-center">
            {{ e.name }}
         </div>
    </div>
</HoverableAnimated>

[milesingrams]

Sweet! Looks like a good solution. I'm curious why a transition and an animation can't coexist. It would be cool if you can specify if transitions take precedence over animations or vice versa. Glad you found something that worked for you. Btw your site looks great!

[florian-lefebvre]

Thank you very much! I will share my progress on this component here.

[florian-lefebvre]

I modified the component a little bit because there was still a small lag.

<!-- XyzConflict.vue -->

<template>
  <div class="xyz-nested" ref="el">
    <slot />
  </div>
</template>

<script>
export default {
  props: ["endClass"],
  mounted() {
    let el = this.$refs.el;
    el.addEventListener("animationend", () => {
      el.classList.remove("xyz-nested");
      setTimeout(() => {
        el.classList.add(this.$props.endClass);
      }, 0);
    });
  }
};
</script>