如何解决Tailwindcss和AlpineJs过渡问题
我正在尝试学习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>
解决方法
好吧...
- 我使用的是
x-show
而不是x-show.transition
- 将按钮置于元素之前。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。