CODEWITHSUNDEEP
htmlalpine.js
PiiMY
PiiMY

Reputation: 73

Reverse x-transition with alpineJS

Hey I'm using AlpineJS for my transitions on my website. Im trying to make a transition that a menu drops down from the top of the screen. This is my transition:

            x-transition:enter="transition origin-top ease-out duration-300" 
            x-transition:enter-start="transform translate-y- opacity-0"
            x-transition:enter-end="transform translate-y-full opacity-100"
            x-transition:leave="transition origin-top ease-out duration-300" 
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"

This transition works, only it goes up instead of down. I've looked on internet but can't seem to find a good solution/documentation for this. Does anybody know the, probably easy, answer to this problem?

Upvotes: 0

Views: 2919

Answers (1)

Helgi
Helgi

Reputation: 41

You can do it like this.

x-transition:enter="transition origin-top ease-out duration-300"
x-transition:enter-start="transform -translate-y-full opacity-0"
x-transition:enter-end="transform translate-y-0 opacity-100"
x-transition:leave="transition origin-top ease-out duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"

This will make it be fully hidden when the transition starts, and at it's correct place when it ends.

Upvotes: 4

Related Questions