Question

我正在制作一个简单的网页。此页面有两张图片。高于1表示不透明度，低于1表示不透明度50％。当我向下滚动网页时，下面图片的不透明度在2秒内变为100％。

我写了代码，但是它们没有达到我的意图。

window.addEventListener('scroll', function() {
    var el = document.querySelector('.show-on-scroll');
    if(window.scrollY >= 400) el.classList.add('shown');
    else el.classList.remove('shown');
});

.show-on-scroll {/*below picture should not be shown*/
	animation: fadeout 2s;
	
}
.show-on-scroll.shown { /*below picture should be shown */
	animation: fadein 2s;
	
}
@keyframes fadein{
	from {opacity:0.5;}
	to {opacity:1;}
}
@keyframes fadeout{
	from {opacity:1;}
	to {opacity:0.5;}
}

<div id="khuimage">
</div>
	
<div id="macbookimage" class="show-on-scroll">
</div>

通过这种方式，如果我上下滚动，则第二张图片（macbookimage）消失，并突然出现在图片下方。这种外观不是我的意图。

下面是我修改过的CSS代码，按照我的意图，它可以很好地工作。

.show-on-scroll {/*below picture should not be shown*/
    animation: fadeout 2s;
    opacity:0.5;
}
.show-on-scroll.shown { /*below picture should be shown */
    animation: fadein 2s;
    opacity:1;
}

我必须编写这些不透明度代码来表示我的网页吗？为什么第一种情况不符合我的意图？

Answer 1

您需要将animation-fill-mode: forwards;放入类.show-on-scroll中，以使其停留在最终关键帧上

animation-fill-mode的默认值为none，动画结束后不应用样式

ref：https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

Answer 2

您应将both添加到animation属性中

这是使用animation-fill-mode属性的简写

window.addEventListener('scroll', function() {
  var el = document.querySelector('.show-on-scroll');
  if (window.scrollY >= 400) el.classList.add('shown');
  else el.classList.remove('shown');
});

#khuimage {
  width: 100%;
  height: 100vh;
  background-color: blue;
  opacity: 1;
}

#macbookimage {
  width: 100%;
  height: 100vh;
  background-color: red;
  opacity: .5;
}

.show-on-scroll {
  /*below picture should not be shown*/
  animation: fadeout 2s both;
}

.show-on-scroll.shown {
  /*below picture should be shown */
  animation: fadein 2s both;
}

@keyframes fadein {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

<div id="khuimage"></div>

<div id="macbookimage" class="show-on-scroll"></div>

Answer 3

基本上，您需要在此处根据滚动位置切换CSS类。

您可以在JS中通过两种方法解决它-通过阅读和评估滚动位置或使用新的闪亮的IntersectionObserver。我已经为第一个选项准备了工作示例，在该示例中，如果scrollY大于1300，我会切换类。如您所见，我还使用了一个布尔型标志，该标志阻止函数生成超常运行。


let isVisible = false

function toggleVisibility(target) {
    const myImage = document.querySelector(target)

  if (myImage.classList.contains('show')) {
    myImage.classList.remove('show')
    isVisible = false
  } else {
    myImage.classList.add('show')
    isVisible = true
  }
}

window.addEventListener('scroll', () => {
    console.log(window.scrollY)

  if(window.scrollY > 1300 && isVisible === false) {
    toggleVisibility('.my-image')
  } else if (window.scrollY < 1300 && isVisible === true) {
    toggleVisibility('.my-image')
  }
})

我已经通过工作示例为您准备了一个JSfiddle：

https://jsfiddle.net/mkbctrlll/hntz8eub/68/ （可能值得增加输出窗口的高度，以实际查看更改）

Answer 4

这没用，因为您从不触发滚动事件。只需设置文档高度即可对此进行测试。

<div style="height: 2999px">
 <div id="khuimage">
    </div>

    <div id="macbookimage" class="show-on-scroll">
    </div>

</div>
    <script>
        window.addEventListener('scroll', function() {
            var el = document.querySelector('.show-on-scroll');
            console.log('HERE ', el.classList);
            if(window.scrollY >= 400) {el.classList.add('shown');
            console.log('HERE ', el.classList);
             }
             else { el.classList.remove('shown'); }
        });
    </script>

Answer 5

如果您使用Safari作为浏览器，则需要为关键帧添加“ @ -webkit-关键帧”。

是否肯定需要此CSS代码？

5 个答案: