使用< dialog>Tailwind CSS转换打开的HTML

s5a0g9ez 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(158)

我正在尝试用Tailwind CSS来动画打开一个元素。文档建议这是添加淡入的正确方法，但似乎当对话框没有打开时[open]选择器不能出现，所以它不会从不透明度0过渡到100，而是直接过渡到100。有更好/不同/正确的方法来做到这一点吗？

<dialog id="myDialog" class="transition-opacity duration-1000 opacity-0 open:opacity-100">
  <p>Hello, world</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

<button onclick="openDialog()">Open dialog</button>

<script>
function openDialog() {
  document.getElementById("myDialog").showModal();
}
</script>

https://codepen.io/rytrose/pen/yLKNJRo

css

来源：https://stackoverflow.com/questions/72835953/transitioning-an-html-dialog-on-open-using-tailwind-css

1条答案

按热度按时间

tgabmvqs1#

我也尝试过这样做，但没有成功。我的解决方案是使用react-transition-group。示例（使用React）：

<CSSTransition
      in={isOpen}
      appear
      classNames={{
        enter: 'opacity-0 backdrop:opacity-0',
        enterDone: 'opacity-100 backdrop:opacity-80',
        exitDone: 'opacity-0 backdrop:opacity-0',
      }}
    >
      <dialog
        className="rounded-lg p-0 shadow transition backdrop:bg-neutral-900 backdrop:opacity-80 backdrop:transition"
        ref={modalRef}
      >
        <button className="absolute top-0 right-1" onClick={onClose}>
          x
        </button>
        {children}
      </dialog>
    </CSSTransition>

赞(0）回复(0）举报 2023-02-10

我来回答

使用< dialog>Tailwind CSS转换打开的HTML

1条答案

相关问题

热门标签

最新问答