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

Answer 2

这不会像您期望的那样工作。原因是如果您想使用<template> 标记以便在初始页面加载时使用display: none 隐藏该部分（这是默认行为），此处的转换将不起作用。 Alpinejs 不支持。

与 x-show 不同，x-if 不支持使用 x 过渡。

你可以在他们的官方page看到。

如果你想要过渡动画，你应该继续使用 div 并避免使用模板。它甚至不会像这样工作：

  <template x-if="open">
    <div x-show="open" x-transition.duration.1500ms>

但是，也许你可以尝试这样的事情：

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