Tailwindcss和AlpineJs过渡问题

Question

我正在尝试学习Tailwind CSS和AlpineJs，并且正在测试针对元素高度的元素过渡动画。但是，有两个问题。

1. 我看不到过渡动画
2. 显示/隐藏元素时，页面会向上滚动。

有人可以帮助我理解或解决此问题吗？这是代码：

<div x-data="{ openForm: false }">
   <div id="form-container" x-show="openForm" class="transition-all" x-transition:enter="ease-out duration-300" x-transition:enter-start="h-0" x-transition:enter-end="h-full" x-transition:leave="ease-in duration-200" x-transition:leave-start="h-full" x-transition:leave-end="h-0">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ipsum suscipit, facere commodi sit nam laboriosam iure natus quae nesciunt provident fugiat enim quo. Molestias, ad sit. Unde, laudantium quas!
      This is to add the item.
      <button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150" @click="openForm = false">
      Cancel
      </button>
   </div>
   <div class="mt-5">
      <button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150" @click="openForm = true" x-show="!openForm" style="display: none;">
      Add New
      </button>
   </div>
</div>

Answer 1

好吧...

1. 我使用的是x-show而不是x-show.transition
2. 将按钮置于元素之前。