不在视口中时移除元素

Question

I'd like to trigger animations (rather than just transformations) on an element when it's in the viewport. I read you can do this if you can create the element when it's in the viewport and delete it when it's not in the viewport.

I've run into a challenge removing the element when it's not in the viewport.

This code works to add and remove classes to elements when they're in the viewport

var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60)};

//create array of all elements with specific class
var elementsToShow = document.querySelectorAll('.show-on-scroll');

//create  loop function cycles above array calls function on it, adds clss if functions returns true, loop runs loop
function loop() {

    Array.prototype.forEach.call(elementsToShow, function(element){
      if (isElementInViewport(element)) {
        element.classList.add("is-visible");
} else {
element.classList.remove("is-visible");

}
});
scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
//the function that will return true checks for list element in viewport
function isElementInViewport(el) {
// special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

In the Array.prototype.forEach.call I've added this code, which I've been exploring (along with many other variations). It makes more sense now to check with someone with more js experience.

Is anyone familiar enough with this structure to spot a quick way through?

Array.prototype.forEach.call(elementsToShow, function(element){
      if (isElementInViewport(element)) {
        element.classList.add("is-visible");

if (element.matches('this-element') && element.lastChild.matches("is-animated")){
const tag = document.createElement("p");
tag.id = "is-animated";
var textTag = document.createTextNode("Some text in the tag.");
tag.appendChild(textTag);
document.getElementById("this-element").appendChild(tag);
}

} else {
element.classList.remove("is-visible");

if(element.matches('is-animated')){
element.remove();
}

}
});
scroll(loop);
}

In the html there is div with id and class "this-element" with several child

tags.

Answer 1

This was a red-herring. The solution was not to remove the elements when out of view, but to change the animation and transition duration, so they end quickly. See here:

function loop() {

Array.prototype.forEach.call(elementsToShow, function(element){

if (isElementInViewport(element)) {
element.classList.remove("end-transitions");
element.classList.add("is-visible");
}

else {
element.classList.remove("is-visible");
element.classList.add("end-transitions");
}
});

scroll(loop);
}

Where .end-transitions contains this:

.end-transitions{
animation-duration:0s !important;
animation-delay:0s !important;
transition-duration: 0s !important;
transition-delay:0s !important;
}