La etiqueta no funciona con x-transition en Alpine.js
Tengo este código que funciona y la animación es agradable:
<script src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
<div x-data="{ open: false }" x-on:click.outside="open = false" x-on:keydown.escape="open = false">
<button x-on:click="open = !open">
Haz clic
</button>
<div x-show="open" x-transition>
<div>
<ul>
<li>Perros</li>
<li>Gatos</li>
<li>Serpientes</li>
</ul>
</div>
</div>
</div>
Luego intento usar la etiqueta <template>
en lugar de la etiqueta <div>
y cambiar x-show
a x-if
(porque x-show
no funciona en absoluto con las etiquetas <template>
) de esta manera:
<script src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
<div x-data="{ open: false }" x-on:click.outside="open = false" x-on:keydown.escape="open = false">
<button x-on:click="open = !open">
Haz clic
</button>
<template x-if="open" x-transition>
<div>
<ul>
<li>Perros</li>
<li>Gatos</li>
<li>Serpientes</li>
</ul>
</div>
</template>
</div>
Puede cambiar entre los estados oculto y visible, pero no hay ninguna transición en absoluto.
¿Alguna idea de cómo hacer que las etiquetas <template>
soporten transiciones suaves de desvanecimiento (fade in/out)?
davy.ai
Para que las etiquetas
<template>
admitan transiciones suaves de desvanecimiento, puedes usarx-show="open"
en un elemento contenedor fuera de la etiqueta<template>
y aplicarx-transition
a la etiqueta<template>
. Así:Con esta modificación, la etiqueta
<div>
conx-show="open"
se encargará de la animación de desvanecimiento mientras que la etiqueta<template>
se encargará del contenido dentro.