不在视口中时移除元素

Question

我想在视口中触发元素上的动画（而不仅仅是转换）。我读到如果您可以在元素位于视口中时创建元素并在它不在视口中时将其删除，则可以执行此操作。

我运行面临删除不在视口中的元素的挑战。

当元素在视口中时，此代码用于向元素添加和删除 classes

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: 
//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))
  );
}

在 Array.prototype.forEach.call 中，我添加了这段代码，我一直在探索它（以及许多其他变体）。现在与具有更多 js 经验的人核实更有意义。

是否有人对这种结构足够熟悉，可以找出快速的方法？


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

在 html 中有带 id 的 div 和带多个子

标签的 class“this-element”。

Answer 1

这是 red-herring。解决方案不是在视图之外时删除元素，而是更改动画和过渡持续时间，以便它们快速结束。看这里：

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

其中 .end-transitions 包含此内容：

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

不在视口中时移除元素

Remove element when not in viewport

javascript

viewport

removechild

css-animations

requestanimationframe