javascript - The <template> tag doesn't work with x-transition in Alpine.js - Stack Overflow

admin 管理员组

文章数量: 1086019

I have this code that works and the animation is nice:

<script src="/[email protected]/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>

I have this code that works and the animation is nice:

<script src="https://unpkg./[email protected]/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>

Then I try to use the <template> tag instead of the <div> tag and change x-show to x-if (because x-show doesn't work with <template> tags at all) like this:

<script src="https://unpkg./[email protected]/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>

it can toggle hidden and shown states, but no transition at all.

Any idea how to make <template> tags support smooth fade in/out transitions?

• javascript
• html
• css
• alpine.js

Share Improve this question Follow edited Dec 8, 2021 at 8:16 Wodit asked Dec 8, 2021 at 8:10 WoditWodit 6922 silver badges55 bronze badges 2

• Did you try this: stackoverflow./a/32350477/5833816 ? – Lazar Nikolic Commented Dec 8, 2021 at 8:22
• I am using Alpine.js . Do you think it can be done only via Alpine.js? The whole point of Alpine.js is not using JavaScript calls and stuff too much or only in very simple form. no queries and stuff. But perhaps the setTimeout() function can be used, but I have no idea how. Do you know? – Wodit Commented Dec 8, 2021 at 8:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I faced this problem too, the only solution I found was adding x-data and x-init attributes and toggling the variable for the x-show directive inside of an $nextTick call. Here is an example:

<script src="https://unpkg./[email protected]/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>

This will not work as you expect. The reason being is that if you want to use a <template> tag in order to hide that section on initial page load with display: none (which is a default behavior), transition here will not work. Alpinejs does not support it.

Unlike x-show, x-if, does NOT support transitioning toggles with x-transition.

as you can see on their official page.

You should continue using div and avoid template if you want transition animation. It wont even work like this:

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

But, maybe you can try something like this:

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

i think the question is more intended to get animation, if new element is created, hence, i remand you to use this codebase

 <div x-data="{ list: [] }">
        <button x-on:click="list.push('new')">
            Click me
        </button>
        <template x-for="i in list">
            <div x-show="open">
                <ul>
                    <li
                        x-text="i"
                        x-transition.duration.1500ms
                        x-data="{ open: false }"
                        x-init="$nextTick(() => { open=true });"
                        x-show="open"
                    ></li>
                </ul>
            </div>
        </template>
    </div>

本文标签： javascriptThe lttemplategt tag doesn39t work with xtransition in AlpinejsStack Overflow