在页面加载时显示元素

Question

我试图让元素仅在页面加载后出现。我添加了一个删除我的元素的 class，以及一个使它们仅在页面加载后出现的修饰符。

当页面完全加载时，我的转场似乎跳转了，但我想播放整个转场。我一直在寻找其他解决方案，但没有一个对我有用。

这就是我的 JavaScript 的样子。

class RevealOnLoad {
    constructor() {
        this.itemsToReveal = document.querySelectorAll(".hero__element");
        this.hideInitially();
        this.events();
    }
    events() {
        let stateCheck = setInterval(() => {
            if (document.readyState === 'complete') {
              clearInterval(stateCheck);
              this.itemsToReveal.forEach(el => {
              el.classList.add("reveal-item--is-visible");
              })
        }
        console.log(document.readyState);
              // document ready
          }, 100);          
    }
    hideInitially() {
            this.itemsToReveal.forEach(el => {
            el.classList.add("reveal-item");
            console.log(document.readyState);
        })
    }
}
export default RevealOnLoad;

和 css class:

.reveal-item {
  opacity: 0;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  transform: scale(1.15);
  }

.reveal-item--is-visible {
    opacity: 1;
    transform: scale(1);
  }

Answer 1

将 document 注册到 "DOMContentLoaded" event，届时将加载除图像以外的所有内容：

document.addEventListener('DOMContentLoaded', reveal);

event handler is reveal(e). Wrap everything in reveal(e) in a setTimeout():

function reveal(e) {
  setTimeout(function() {
  //... switch classes etc.
  }, 2000);
}

在CSS中使用@keyframe and animation。

document.addEventListener('DOMContentLoaded', reveal);

function reveal(e) {
  setTimeout(function() {
    const H = document.querySelectorAll('.hidden');
    H.forEach(h => {
      h.classList.toggle('hidden');
      h.classList.toggle('revealed');
    })
  }, 2000);
}

.hidden {
  opacity: 0;
  transform: scale(0);
}

.revealed {
  animation: show 3s forwards ease-in;
}

@keyframes show {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<h1 class='hidden'>TITLE</h1>
<fieldset class='hidden'>
  <legend>TITLE</legend>
</fieldset>

在页面加载时显示元素

Reveal element on page load

javascript

css

events