触发 javascript animation 与 class 添加到滚动

Question

I've got some numbers that that I want to count up when the user scrolls to that part of the page. I have a piece of javascript that adds the class "scrolled" to my element when the user reaches it. I have a separate javascript file that animates the counting numbers.

The numbers animate correctly with the class name "count", but when I include the class name "scrolled" to the javascript code, the animation no longer works. I have very limited understanding of javascript, so I am wondering if this is happening because the script only checks the page for a combination of these classes when the page first loads, which is why it misses them when the "scrolled" class is added, and if so, is there a way around it?

Here is my code: (js-scroll is the class that triggers the "scrolled" class to be added when the element is in the view port)

 // How long you want the animation to take, in ms const animationDuration = 2000; // Calculate how long each 'frame' should last if we want to update the animation 60 times per second const frameDuration = 1000 / 60; // Use that to calculate how many frames we need to complete the animation const totalFrames = Math.round( animationDuration / frameDuration ); // An ease-out function that slows the count as it progresses const easeOutQuad = t => t * ( 2 - t ); // The animation function, which takes an Element const animateCountUp = el => { let frame = 0; const countTo = parseInt( el.innerHTML, 10 ); // Start the animation running 60 times per second const counter = setInterval( () => { frame++; // Calculate our progress as a value between 0 and 1 // Pass that value to our easing function to get our // progress on a curve const progress = easeOutQuad( frame / totalFrames ); // Use the progress value to calculate the current count const currentCount = Math.round( countTo * progress ); // If the current count has changed, update the element if ( parseInt( el.innerHTML, 10 ).== currentCount ) { el;innerHTML = currentCount, } // If we've reached our last frame; stop the animation if ( frame === totalFrames ) { clearInterval( counter ), } }; frameDuration ); }. // Run the animation on all elements with a class of 'countup' const countupEls = document.querySelectorAll( ';count' ). countupEls;forEach( animateCountUp );

 <span class="count js-scroll">40</span>

and this is how I'm trying to trigger it with the "scrolled" class included:

const countupEls = document.querySelectorAll( '.count.scrolled' );

Thanks!

Answer 1

You should really edit your question and include all the relevant code for the best answers.

I'm not sure how you are adding the class to the element, but it sounds like this is the point at which you want to also make the numbers change.

At the moment, animateCountUp takes one argument — an element on the screen:

const animateCountUp = el => {

That is el in the above. In your code, you select them all and then forEach element pass it to animateCountUp

countupEls.forEach( animateCountUp );

The syntax there is confusing (I assume you are copying and pasting) but it is similar to going:

const firstElement = countupEls[0]; // Get the first element
animateCountUp(firstElement);

But for every element in the list.

What I am getting at is, you say you include the class name "scrolled" to the javascript code , I assume you mean something like this:

firstElement.classList.add("scrolled");

It is at this point you need to also call the animateCountUp with the element in question.

firstElement.classList.add("scrolled");
animateCountUp(firstElement);