Tailwindcss 和 AlpineJs 过渡问题

Posted 2023-03-07

【中文标题】Tailwindcss 和 AlpineJs 过渡问题

【英文标题】：Tailwindcss & AlpineJs Transition Issue

【发布时间】：2021-01-08 10:59:36

【问题描述】：

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

我没有看到过渡动画 当元素显示/隐藏时页面向上滚动。

谁能帮我理解或解决这个问题？代码如下：

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

【参考方案1】：

好吧……

而不是x-show 我用x-show.transition 将按钮放在元素之前。