如何忽略基于 javascript 的转换

Question

大家好，

起初我想为我糟糕的英语道歉。

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

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

但我的问题是，当您向下滚动然后快速向上滚动（一秒左右）时，您仍然会看到箭头（不透明度为 0.6 左右）。 Soo.. 我想要的是：当箭头离开屏幕时，不透明度必须为 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，上面有一个过渡。第三个是out状态。在这一个中，我们将不透明度设置为 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>

如何忽略基于 javascript 的转换

How to ignore an transition based on javascript

html

javascript

css

css-transitions