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执行淡出动画，它只是我要制作的.display等待2秒的动画。

此外，我不知道如何使用JQuery或其他文档的代码，所以我需要它纯粹是HTML，JavaScript或CSS。谢谢。（我是菜鸟）

Answer 1

如果您需要在2秒后运行

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

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

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

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

W3CSchool Doc

如果您需要等待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来捕获事件并添加一个类。

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

最后，如果你想要破坏元素，你可以使用javascript来监听动画结果＆＃39;事件（名称取决于浏览器），由浏览器捕获，并在当时触发您的函数以销毁元素（而不是像您尝试的那样有固定的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的代码：

Task

然后在css：

<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);

最后是HTML：

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

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

在等待2秒后让标题消失并重新出现

3 个答案: