等待2秒钟后使标题消失并重新出现

Question

我回答下面

我想使文档的标题在滚动后播放动画以淡入淡出，然后使用style.display使其不可用。 这是代码：

<script type="text/javascript">

function Scroll()
    {
        var head = document.getElementById('header')
        if (window.pageYOffset > 1) 
            {
                head.style.display = "none";
                head.style.opacity = "0";
            } else {
                head.style.display = "block";
                head.style.opacity = "1";
            }
    }
window.addEventListener("scroll",Scroll);

</script>

我不知道如何做到这一点，这样它将在运行document.getElementById('header').style.display = "none"之前等待两秒钟。

我在<style>标记中使用.opacity进行淡出动画，这只是我想等待动画2秒的.display。

另外，我也不知道如何使用JQuery或其他文档的代码，因此我需要它完全是HTML，JavaScript或CSS。 谢谢。 （我是菜鸟）

Answer 1

如果您需要在2秒后运行

为此，您可以根据需要使用setInterval或setTimeout 。

setTimeout(function(){ alert("This is after 3 sec"); }, 3000);

setInterval ：在每个指定的时间间隔后运行。

setTimeout ：在等待指定时间后仅运行一次。

W3C学校文档

如果您需要等到DOM被加载。

为此，您必须检查DOMContentLoaded事件。 无论您拥有什么代码，都应包含在其中。

document.addEventListener("DOMContentLoaded", function (event) {
function Scroll()
    {
        var head = document.getElementById('header')
        if (window.pageYOffset > 1) 
            {
                head.style.display = "none";
                head.style.opacity = "0";
            } else {
                head.style.display = "block";
                head.style.opacity = "1";
            }
    }
window.addEventListener("scroll",Scroll);
}

我希望这可以解决您的问题。

Answer 2

实现性能和可维护性的最佳方法是让CSS处理动画，并且仅使用javascript捕获事件并添加类。

此外，您还需要一种方法来确保绑定到滚动事件的函数仅触发一次。

最后，如果您要销毁元素，则可以使用javascript监听由浏览器捕获的“ animationend”事件（名称与浏览器相关），然后触发函数销毁元素（而不是像您尝试的那样有固定的2秒延迟）。

这是我刚刚描述的实现的codepen演示： http ://codepen.io/anon/pen/NdWGqO

这是相关的js和CSS：

//js
var head = document.getElementById('header');
var hasScrolled = false;

function onScroll() { // a function should only start with a capital letter if it is a constructor
    if (!hasScrolled) {
        head.className += " fade-out";
        window.removeEventListener("scroll",onScroll); // remove this so it only fires once
    }
    hasScrolled = true; // this prevents the class from being added multiple times  
}

function destroyElement() {
    head.className += " hidden"; // the 'hidden' class will give the element 'display : none'
}

function captureEvents () {
    window.addEventListener("scroll",onScroll);

    // capture the animation end event, there are better ways to do this to support all browsers FYI
    head.addEventListener("animationend", destroyElement);
    head.addEventListener("webkitAnimationEnd", destroyElement);
    head.addEventListener("oanimationend", destroyElement);
    head.addEventListener("MSAnimationEnd", destroyElement);
}

document.addEventListener("DOMContentLoaded", captureEvents);

//css

.hidden {
  display: none;
}

.fade-out {
  animation-name: fadeOut;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

@keyframes fadeOut {
    from {opacity: 1; }
    to {opacity: 0; }
}

@-webkit-keyframes fadeOut {
    from {opacity: 1; }
    to {opacity: 0; }
}

Answer 3

我想通了...这是js的代码：

<script type="text/javascript">

function Scroll()
{
    var head = document.getElementById('header');
    var timeOut;
    var displayNone = 'head.style.display = "none"'
    if (window.pageYOffset < 1)
        {
            clearTimeout(timeOut);
        }
    if (window.pageYOffset > 1) 
        {
            timeOut = setTimeout(function(){displayNone}, 2000);
            head.style.opacity = "0";
        } else {
            head.style.display = "block";
            head.style.opacity = "1";
            stopcount();
        }
}

window.addEventListener("scroll",Scroll);

然后在CSS中：

    #header
    {
        height: 100px;
        width: 100%;
        position: fixed;
        background:radial-gradient(circle,#777,#666);
        transition:all 0.2s;
    }

最后是HTML：

<header id="header"></header> /* header info goes in here */

idk为什么，但是当我将显示的任何部分都设置为变量时，它就将其修复了。