JavaScript help in animation-CodePudding

"I want disable fade-in and fade-out animation after one time its apply on whole web page"

I need a pure JavaScript code which disable fade-in and fade-out animation after it apply one time

.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');
    }   
 }
}

CodePudding user response：

Use a count variable. When the function that involves the fade-in and fade-out is triggered, add to the count variable. After it is increased, make it so these changes do not occur any more.

let count = 0; 
count  ;

If you want to have more code in the answer, post some more from your specific example.

CodePudding user response：

This creates a count variable. If you want the animation to occur exactly once, then this should work as the count is increased by one after the animation occurs, making sure it will not happen again.

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  ;
}