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"> Click me </button> <div x-show="open" x-transition> <div> <ul> <li>Dogs</li> <li>Cats</li> <li>Snakes</li> </ul> </div> </div> </div> Luego trato de usar la etiqueta <template> en lugar de la etiqueta <div> y cambio x-show a x-if (porque x-show no funciona con las etiquetas <template> en absoluto) así:
<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"> Click me </button> <template x-if="open" x-transition> <div> <ul> <li>Dogs</li> <li>Cats</li> <li>Snakes</li> </ul> </div> </template> </div>puede alternar estados ocultos y mostrados, pero ninguna transición.
¿Alguna idea de cómo hacer que las etiquetas <template> admitan transiciones suaves de entrada/salida?
También enfrenté este problema, la única solución que encontré fue agregar los atributos x-data y x-init y alternar la variable para la directiva x-show dentro de una llamada $nextTick. Aquí hay un ejemplo:
<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"> Click me </button> <template x-if="open"> <div x-data="{ show: false }" x-init="$nextTick(() => { show = true })" x-show="show" x-transition> <ul> <li>Dogs</li> <li>Cats</li> <li>Snakes</li> </ul> </div> </template> </div>Esto no funcionará como esperas. El motivo es que si desea utilizar una etiqueta <template> para ocultar esa sección en la carga de la página inicial con display: none (que es un comportamiento predeterminado), la transición aquí no funcionará. Alpinejs no lo admite.
A diferencia de x-show, x-if, NO admite cambios de transición con x-transition.
como se puede ver en su página oficial.
Debe continuar usando div y evitar la plantilla si desea una animación de transición. Ni siquiera funcionará así:
<template x-if="open"> <div x-show="open" x-transition.duration.1500ms>Pero, tal vez puedas probar algo como esto:
<div x-data="{ open: false, animals: ['Animals'] }" x-on:click.outside="open = false" x-on:keydown.escape="open = false"> <button x-on:click="open = !open"> Click me </button> <template x-for="animal in animals"> <div x-show="open" x-transition.duration.1500ms> <ul> <li>Dogs</li> <li>Cats</li> <li>Snakes</li> </ul> </div> </template> </div>