如何淡入HTML5对话框？

Question

如何淡入HTML5对话框？通过对话我的意思是HTML5 <dialog>标签(http://demo.agektmr.com/dialog/).

我尝试了以下(http://jsfiddle.net/v6tbW/)但由于某种原因转换不起作用.

HTML

<dialog id="myDialog">
    Test
</dialog>

<script>
     document.getElementById('myDialog').show(); // note that this is a method of <dialog>, this is not a jQuery method.
</script>

CSS

dialog {
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;

    visibility:hidden;
    opacity:0;
    transition:visibility 10s linear 10s,opacity 10s linear;
}

dialog[open] {   
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

.backdrop {
    position: fixed;
    background: rgba(0,0,0,0.1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

最低 HTML 5 版本

下面的示例的优点是不需要依赖项或外部脚本。该<dialog>标签在打开时非常方便showModal，因为它会在其周围声明的 DOM 顶部显示一个背景，即使display: relative | absolute在其直接父级上也是如此。

dialog {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
dialog[open] {
  opacity: 1;
  pointer-events: inherit;
}
dialog::backdrop {
  background-color: rgba(0,0,255, 0.2);
}

<button onclick="dialog.showModal()">show dialog</button>
<dialog id="dialog">
  <p>hi i'm a dialog!</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

使用<form>withmethod=dialog可以完成关闭模式，而无需处理关闭事件。

这两个参考文献最有启发性：

https://css-tricks.com/some-hands-on-with-the-html-dialog-element/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

结束点

• 截至2020年6月11日，Safari普遍不支持此功能
• 这使得 React 门户对于模式目的来说已经过时了

Answer 2

如果在元素上设置display: block，则可以转换元素（并留出时间将此样式应用于元素）。

演示：http : //jsfiddle.net/v6tbW/11/

要做到这一点.showModal()，不幸的是，过渡似乎只对[open]属性不起作用。如果您添加另一个类，它们似乎确实有效：

http://jsfiddle.net/karlhorky/eg4n3x18/

Answer 3

您可以考虑使用

• -webkit 动画
• @关键帧

dialog[open] {
    animation: myFadeIn 5.0s ease normal;
  }
  
@keyframes myFadeIn{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

示例

<style>
  /*  Optional. change the background style. */
  dialog::backdrop {
    background-color: rgba(255, 128, 30, .75);
    backdrop-filter: blur(3px);
  }

  /*  style1: fadeIn */
  dialog[open] {
    animation: myFadeIn 5.0s ease normal;
  }
  @keyframes myFadeIn{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /*  style2: top2center */
  dialog#top2center[open] {
    // Find your favorite style from here: https://cubic-bezier.com/
    // animation: myTop2Center 3.0s ease normal;
    animation: myTop2Center 1.2s cubic-bezier(.33,1.44,.83,.22)
  }
  @keyframes myTop2Center{
    from {
      transform: translateY(-200%);
    }
    to {
      transform: translateY(0%);
    }
  }
</style>

<dialog>
  <header>FadeIn</header>
  <form>
    <button>Close</button>
  </form>
</dialog>

<dialog id="top2center">
  <header>Top2Center</header>
  <form>
    <button>Close</button>
  </form>
</dialog>

<script>
  document.querySelectorAll(`dialog`).forEach(dialogElem=>{
    const testName = dialogElem.querySelector(`header`).innerText
    const frag = document.createRange().createContextualFragment(`<button>${testName}</button><br>`)
    const showBtn = frag.querySelector(`button`)
    const closeBtn = dialogElem.querySelector(`button`)
    showBtn.onclick = () => dialogElem.showModal()
    closeBtn.onclick = () => dialogElem.close()
    dialogElem.querySelector(`form`).onsubmit = () => false // To stop submit event.
    document.body.append(frag)
  })
</script>

• 帮助您定制cubic-bezier：https://cubic-bezier.com/
• 我可以用吗
  • 动画片
  • 关键帧

Answer 4

因为你使用的是 jQuery。这是一个更简单的方法：

http://jsfiddle.net/v6tbW/3/

超文本标记语言

<dialog id="myDialog">
    Test
</dialog>

CSS

dialog {
    display: none;
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}

jQuery

$(function() {

    $('#myDialog').fadeIn(10000);

});