我想在向下滚动页面时设置元素的动画。我只想使用 JavaScript 来实现这一点。我希望它像这样工作：没有动画，但是当您向下滚动到第二个容器时，JS 设置动画并显示容器内的内容。问题是，当我加载页面时，没有动画（这很好）。当我向下滚动时，仍然没有动画（这很糟糕！），但是当我在网站底部使用 F5 刷新页面时，动画会显示，但仍然没有显示带有蓝色背景的元素。这是我这部分的完整代码： <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> * { margin: 0; padding: 0; } .main { display: block; margin: auto; height: 1000px; width: 100%; background-color: grey; } .main-inner1 { display: block; margin: auto; height: 600px; width: 100%; background-color: orange; } .main-inner2 { display: block; margin: auto; height: 600px; width: 100%; background-color: green; } .main-inner2-container { display: block; position: relative; height: 50px; width: 200px; overflow: hidden; margin: auto; } .main-inner2-content1 { display: block; position: absolute; top: 100%; margin: auto; height: 50px; width: 200px; background-color: blue; } @keyframes FadeIn { { from: top: 100%; } { to: top: 0; } } </style><script> document.addEventListener("DOMContentLoaded", function(){ var y = window.scrollY; var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top; if (y >= x) { document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards"; } });</script><body><div class="main"> <div class="main-inner1"></div> <div class="main-inner2"> <div class="main-inner2-container"> <div class="main-inner2-content1"> </div> </div> </div></div>我正在学习 JS，所以不使用任何库对我来说很重要：P
1 回答
守候你守候我
TA贡献1802条经验 获得超10个赞
我稍微修改了你的代码。您正在侦听 DOMContentLoaded 事件，该事件仅触发一次（在 DOM 完全加载之后），而不是窗口滚动事件。
window.onscroll = function() {
var y = window.scrollY;
var x = document.querySelector(".main-inner2-container").getBoundingClientRect().top;
if (y >= x) {
document.querySelector(".main-inner2-content1").style.animation = "FadeIn 1s linear 0s 1 forwards";
}
}
* {
margin: 0;
padding: 0;
}
.main {
display: block;
margin: auto;
height: 1000px;
width: 100%;
background-color: grey;
}
.main-inner1 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: orange;
}
.main-inner2 {
display: block;
margin: auto;
height: 600px;
width: 100%;
background-color: green;
}
.main-inner2-container {
display: block;
position: relative;
height: 50px;
width: 200px;
overflow: hidden;
margin: auto;
}
.main-inner2-content1 {
display: block;
position: absolute;
top: 100%;
margin: auto;
height: 50px;
width: 200px;
background-color: blue;
}
@keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
<div class="main">
<div class="main-inner1"></div>
<div class="main-inner2">
<div class="main-inner2-container">
<div class="main-inner2-content1">
</div>
</div>
</div>
</div>
此外，您定义关键帧的语法不正确。这是
@keyframes FadeIn {
from { top: 100%; }
to {top: 0; }
}
并不是
@keyframes FadeIn {
{ from: top: 100%; }
{ to: top: 0; }
}
添加回答
举报
0/150
提交
取消