如何忽略基于 javascript 的过渡

Question

嘿伙计们，

起初，我想为我的英语不好道歉。

我正在制作一个网站，您目前可以在这里找到：http://rekenopjetoekomst.nl/test/test.html

当您向下滚动时，菜单下照片的高度将减小。但是，您需要通过幻灯片导航的箭头也必须消失。我是通过将不透明度更改为 0 并过渡来做到这一点的。

但我的问题是，当您向下滚动然后快速向上滚动（一秒钟或其他时间）时，您仍然会看到箭头（不透明度为 0.6 左右）。所以。。我想要的是：当箭头离开屏幕时，不透明度必须为 0，没有过渡。如果你滚动回照片，箭头必须带有过渡。

感谢你的所有帮助！

Javascript（只有箭头1和2）：

function yScroll(){
    pijl1 = document.getElementById('pijl1');
    pijl2 = document.getElementById('pijl2');
    yPos = window.pageYOffset;
    if(yPos > 100 && yPos < 370){
        pijl1.style.opacity = "0.8";
        pijl2.style.opacity = "0.8";
    } else if(yPos > 370){
        pijl1.style.opacity = "0.0";
        pijl2.style.opacity = "0.0";
    } 
}
var animateInterval = setInterval(yScroll,10);

.CSS：

#mainbox #foto #pijl1 {
    transition: opacity 1s ease-in 1.3s;
}
#mainbox #foto #pijl2 {
    transition: opacity 1s ease-in 1.3s;
} 

Answer 1

我会使用三态设置。

第一个状态是可见（正常）状态。第二个是淡入淡出状态，不透明度设置为 0，并且上面有一个过渡。第三个是出局状态。在这个中，我们将不透明度设置为 0，但没有延迟。

为了管理这一点，我们创建了 3 个类，并根据滚动级别分配每个类

具有扩展时序的演示，因此更容易看到

function yScroll(){
    ele = document.getElementById('test');
    yPos = window.pageYOffset;
    if(yPos > 200){
        ele.className = "out";
    } else if(yPos > 100){
        ele.className = "fading";
    } else {
        ele.className = "normal";
    } 
}
var animateInterval = setInterval(yScroll,10);

#test {
  height: 50px;
  width: 100px;
  margin-top: 300px;
  background-color: green;
}
.pusher {
  margin: 3000px;
}
.out {
  opacity: 0.1;
  transition: opacity 0.1s;
}
.fading {
  opacity: 0.2;
  transition: opacity 20s;
}
.normal {
  opacity: 1;
  transition: opacity 20s;
}

<div id="test"></div>
<div class="pusher"></div>