<template> 标签不适用于 Alpine.js 中的 x-transition

Question

我有这段代码可以工作，而且动画也很好：

<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>

然后我尝试使用<template>标签而不是<div>标签并更改x-show为x-if（因为根本x-show不适用于标签），如下所示：<template>

<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>

它可以切换隐藏和显示状态，但根本没有转换。

知道如何使<template>标签支持平滑的淡入/淡出过渡吗？

Answer 1

我也遇到了这个问题，我找到的唯一解决方案是添加 x-data 和 x-init 属性，并在 $nextTick 调用内切换 x-show 指令的变量。这是一个例子：

<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>