当用户在框外单击时，如何创建平滑的边框强调？

Question

我试图在用户点击框外时强调框（这是一个错误框）。

我一直在尝试使用 jquery 和 css 过渡动画，但它们没有得到我想要的平滑结果。我只想简单强调一下，让用户重新关注警报。这就像任何 Windows 或 Apple 警报一样，您点击警报旁边的某处，它会发出声音并强调该框。

我试过 transition:border linear 0.2s; 然后在用户点击外部时用 jquery 创建边框。

popup = $("#popup");

$(window).on("click", function(e) {
  if (e.target.id != "popup") {
    popup.css("border", "red solid 2px");
    setTimeout(function() {
      popup.css("border", "none");
    }, 250);
  }
})

#popup {
  display: block;
  position: fixed;
  left: 50px;
  top: 50px;
  padding: 20px;
  background-color: black;
  color: white;
  border: white 1px solid;
  transition: border linear 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup">Example.</div>

如果有人有一个流畅的解决方案，可以提供柔和的强调，或者有指向我可以找到方法的链接，那将不胜感激。一如既往，感谢您的帮助或建议！

Answer 1

我建议使用轮廓而不是边框。

popup = $("#popup");

$(window).on("click", function(e) {
  if (e.target.id != "popup") {
    popup.css("outline-width", "10px");
    setTimeout(function() {
      popup.css("outline-width", "inherit");
    }, 250);
  }
})

#popup {
  display: block;
  position: fixed;
  left: 50px;
  top: 50px;
  padding: 20px;
  color: #fff;
  background-color: black;
  outline: solid 0px red;
  transition: outline 0.2s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup">Example.</div>

当用户在框外单击时，如何创建平滑的边框强调？

How can I create a smooth border emphasis when user clicks outside box?

css

jquery

border