Question

因此，我在项目的CSS部分中包含以下代码行，使该项目不可见，但我希望对此有所延迟。因此，例如，这些行要等到5秒钟后才能运行，因为我不希望项目从一开始就不可见。也许有人可以为我重写此附加代码，并在可能的情况下增加延迟？

static T FromJson(string json)

Answer 1

从描述问题的方式出发，解决方案将不在于CSS，而在于Javascript。

您可以执行以下两项操作之一：

编写一个Javascript函数，该函数在指定的位置后隐藏alement 条件发生。
在之后编写应用指定CSS样式的Javascript函数指定条件，以便CSS可以从中隐藏元素那一点。

JQuery

有些人喜欢使用JQuery（仅在确实需要该库的情况下才这样做）

.... snip html ...   

<div class=".target">
  Some content
</div>

.... snip html ...

<script>
    $( ".target" ).hide(200);
</script>

在此情况下，$用于选择所有具有指定标识符的元素.target。函数调用.hide()隐藏了元素，您可以传递x毫秒的参数来延迟转换。（0或没有瞬间）

本地JavaScript

原生javascript看起来像这样：

.... snip html ...   

<div class=".target">
  Some content
</div>

.... snip html ...

<script>
    // Hide element function
    var hide = function (elem) {
        elem.style.display = 'none';
    };

    // Get the content
    var content = document.querySelector(".target");
    if (!content) return;

    // Hide the content
    hide(content);
</script>

Answer 2

如果要逐渐隐藏元素，则应使用opacity和transition：

body {
  margin: 0;
  font-family: monospace;
}

#message {
  width: 100vw;
  height: 100vh;
  background: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity linear 5s;
}

#message:hover {
  opacity: 0;
}

<div id="message">HOVER ME!</div>

请注意，过渡结束后，您还需要一些其他代码来应用visibility: hidden或display: none，以使该元素不再发生鼠标事件。

否则，您可以将5s的{{3}}设置为使visibility属性在该延迟后发生变化：

body {
  margin: 0;
  font-family: monospace;
}

#message {
  width: 100vw;
  height: 100vh;
  background: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: visibility linear 0s 5s;
}

#message:hover {
  visibility: hidden;  
}

<div id="message">HOVER ME!</div>

如何在这行代码运行之前添加延迟？

2 个答案: