JavaScript帮助动画

Question

我想在一次后禁用渐入淡出动画，它适用于整个网页">

我需要一个纯JavaScript代码禁用渐入淡出动画后，它应用一次

.fade {
/* transition: opacity 0.9s ease-in;*/
opacity: 0;   
}
.fade.visible {
transition: opacity 1s ease-in;
opacity: 1;
}
window.addEventListener('scroll', fade);
function fade()
{
let animation=document.querySelectorAll('.fade');
for (let i=0; i<animation.length; i++)
{
let windowheight=window.innerHeight;
let top=animation[i].getBoundingClientRect().top;
if (top < windowheight)
{
animation[i].classList.add('visible');
}
else
{
animation[i].classList.remove('visible');
}   
}
}

Answer 1

使用count变量。当涉及淡入和淡出的函数被触发时，添加到count变量中。增加后，使这些更改不再发生。

let count = 0; 
count++;

如果你想在答案中有更多的代码，从你的具体例子中发布更多的代码。

Answer 2

这会创建一个count变量。如果你想让动画只出现一次，那么在动画出现后，计数应该增加1，以确保它不会再次发生。

let count = 0;
window.addEventListener('scroll', fade);
function fade()
{
if (count < 1)
{
let animation=document.querySelectorAll('.fade');
for (let i=0; i<animation.length; i++)
{
let windowheight=window.innerHeight;
let top=animation[i].getBoundingClientRect().top;
if (top < windowheight)
{
animation[i].classList.add('visible');
}
else
{
animation[i].classList.remove('visible');
}    
}
}
else
{
return;
}
count++;
}