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

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>