如何将Alpine.js的x-transitions转换为Vue.js的过渡类？
Hey there! No worries at all—transition syntax differences between Alpine.js and Vue are super easy to mix up when you're switching frameworks, especially when you're still getting up to speed with front-end transitions. Let's break down what's going wrong and get your animation working.
The Core Issue: Misaligned Transition Class Mapping
The problem comes down to how Vue and Alpine.js name their transition state classes—they don't map 1:1 the way you might expect. Here's the correct correspondence between your Alpine code and Vue's transition props:
| Alpine.js Directive | Vue Transition Prop | Purpose |
|---|---|---|
x-transition:enter | enter-active-class | Defines the base transition (timing, easing, duration) for the enter animation |
x-transition:enter-start | enter-class | The initial state of the element when entering (before the animation starts) |
x-transition:enter-end | enter-to-class | The final state of the element when entering (animation completes) |
x-transition:leave | leave-active-class | Base transition for the leave animation |
x-transition:leave-start | leave-class | Initial state of the element when leaving (animation starts here) |
x-transition:leave-end | leave-to-class | Final state of the element when leaving (animation completes) |
In your original Vue code, you swapped the roles of enter-class and enter-active-class, plus misassigned the leave classes too. That meant Vue wasn't applying the animation timing correctly, and the state classes were applied at the wrong stages—resulting in no visible transition.
The Corrected Vue Transition Code
Here's the fixed version that matches your Alpine.js animation exactly:
<transition enter-active-class="transition ease-out duration-100" enter-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95" > <div v-if="open"> <!-- Your content goes here --> </div> </transition>
Quick Additional Checks
To make sure everything works smoothly:
- Double-check that
openis a reactive variable in your Vue component (e.g., declared withconst open = ref(false)in Composition API, ordata() { return { open: false } }in Options API). Without reactivity, Vue won't trigger the transition whenopenchanges. - Confirm Tailwind CSS is properly set up in your Vue project—all the classes like
transition,scale-95, andopacity-0need to be available to the component. - Ensure the
<div>inside the transition has content (empty divs might not show the transition clearly, especially scaling effects).
内容的提问来源于stack exchange，提问作者Micheal J. Roberts
