Javascript 这个CSS代码一定需要吗？
我正在制作一个简单的网页。本页有两张图片。上面一个是100%不透明度，下面一个是50%不透明度。当我向下滚动网页时，下面图片的不透明度在2秒内变为100% 我写了代码，但它们不符合我的意图 window.addEventListener'scroll'，函数{ var el=document.querySelector'.show on scroll'； ifwindow.scrollY>=400 el.classList.添加“显示”； else el.classList.删除“已显示”； }; .show on scroll{/*下面的图片不应显示*/ 动画：淡出2s； } .show-on-scroll.show{/*应显示下面的图片*/ 动画：Fadein2S； } @关键帧淡入淡出{ 从{opacity:0.5；} 到{opacity:1；} } @关键帧淡出{ 从{opacity:1；} 到{不透明度：0.5；} } 您需要设置动画填充模式：向前；进入类。滚动显示，使其停留在最终关键帧 “动画填充模式”的默认值为“无”，在动画结束后不会应用样式 ref:您需要将动画填充模式：向前；进入类。滚动显示，使其停留在最终关键帧 “动画填充模式”的默认值为“无”，在动画结束后不会应用样式Javascript 这个CSS代码一定需要吗？,javascript,html,css,Javascript,Html,Css,我正在制作一个简单的网页。本页有两张图片。上面一个是100%不透明度，下面一个是50%不透明度。当我向下滚动网页时，下面图片的不透明度在2秒内变为100% 我写了代码，但它们不符合我的意图 window.addEventListener'scroll'，函数{ var el=document.querySelector'.show on scroll'； ifwindow.scrollY>=400 el.classList.添加“显示”； else el.classList.删除“已显示”；
ref:它在您的端不起作用，因为您从未触发滚动事件。 只需设置文档高度即可进行测试
<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>
这对你来说不起作用，因为你从未触发滚动事件。 只需设置文档高度即可进行测试
<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>
如果使用Safari作为浏览器，则需要为关键帧添加@-webkit关键帧。如果使用Safari作为浏览器，则需要为关键帧添加@-webkit关键帧。基本上，您需要在此处根据滚动位置切换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')
}
})
增加输出窗口的高度可能是值得的，要真正看到更改，这里需要做的基本上是根据滚动位置切换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')
}
})
可能值得增加输出窗口的高度，以实际查看更改而不是使用动画和关键帧，您可以简单地在下图上将不透明度设置为0.5，将不透明度转换为2，然后将显示的类的不透明度设置为1。我同意Jake的观点。在这种情况下，如果没有合理的理由，则不应使用动画。使用transition@Jake谢谢大家!@云曾，我明白了！谢谢：@Yoonjongle很高兴我能帮忙，而不是使用动画和键盘
ames，你可以简单地在下图中设置不透明度为0.5，在不透明度上设置过渡为2s，然后给显示的类设置不透明度为1。我同意Jake的观点。在这种情况下，如果没有合理的理由，则不应使用动画。使用transition@Jake谢谢大家!@云曾，我明白了！谢谢：@Yoonjongle很高兴我能help@krugtep但我还有一个问题。如果我刷新网页，第二张图片以100%不透明度显示，它将变为50%不透明度。如何使第二张图片的不透明度达到50%？@Yoonjongle如果您打算使用关键帧，唯一的方法是将不透明度：0.5作为类中的默认值。在滚动中显示。这不是处理简单动画的最佳方法。您可以简单地使用过渡持续时间道具检查这支笔：它在现实中是如此简单的问题！：我不知道那个解决办法。非常感谢你的帮助！！！！我想我需要很多研究：@krugtep，但我还有一个问题。如果我刷新网页，第二张图片以100%不透明度显示，它将变为50%不透明度。如何使第二张图片的不透明度达到50%？@Yoonjongle如果您打算使用关键帧，唯一的方法是将不透明度：0.5作为类中的默认值。在滚动中显示。这不是处理简单动画的最佳方法。您可以简单地使用过渡持续时间道具检查这支笔：它在现实中是如此简单的问题！：我不知道那个解决办法。非常感谢你的帮助！！！！我想我需要大量的学习：