I have this code inside liveview in Phoenix 1.6:

      <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.opacity>
          <div>
            <ul>
              <li>Dogs</li>
              <li>Cats</li>
              <li>Snakes</li>
            </ul>
          </div>
        </div>
      </div>

And the transition fade in/out animation works.

But when I do this:

      <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-show="open" x-transition.opacity>
          <div>
            <ul>
              <li>Dogs</li>
              <li>Cats</li>
              <li>Snakes</li>
            </ul>
          </div>
        </template>
      </div>

It doesn’t. In fact nothing shows up at all and I have to change x-show to x-if to at least be able to make the show hide work albeit without any fade in/out effect at all:

      <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.opacity>
          <div>
            <ul>
              <li>Dogs</li>
              <li>Cats</li>
              <li>Snakes</li>
            </ul>
          </div>
        </template>
      </div>

How can I make this transition to work on the <template> element?