动画效果不适用于 IntersectionObserver

Question

我正在为我的网站添加一些效果。首先我添加了一个翻译效果，效果很好。我有一个 InsersectionObserver 仅在用户到达该部分时触发效果。然后我添加了一个淡入淡出动画，它也可以工作，但由于某种原因在网站加载时触发，而不是在我到达该部分时触发。这意味着效果“丢失”，人不会看到它。

.vision-box-animation{
  /* Animation Settings */
  transform: translateY(+100px);
  animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.up{
  transform: translateY(0);
  transition: transform ease 1s;
}

let timer = 0;
window.addEventListener('load', (event) => {
    let intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setTimeout(function() { entry.target.classList.add('up'); }, timer);
            timer += 50;
            intersectionObserver.unobserve(entry.target);
          }
        });
    });

    document.querySelectorAll('.vision-box-animation').forEach(obj => {
      intersectionObserver.observe(obj);
    });
  });

我做错了什么？我希望淡入效果也仅在该人到达网站的该部分时触发。

先感谢您！

Answer 1

当您应用 css 动画时，它将立即运行：

• 元素在dom中。
• 元素 css 指定动画。

在您的情况下，一旦加载页面。
div 在 dom 中，.vision-box-animation 指定了动画。因此它将立即运行。

intersectionObserver 正在申请一个新班级。 .up；你可以把你的动画移到那个班级。 所以元素只在添加.up类后指定一个动画

例子：

let timer = 0;
window.addEventListener('load', (event) => {
  // orginal code,
  let intersectionObserver = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        setTimeout(function() {
          entry.target.classList.add('up');
        }, timer);
        timer += 50;
        intersectionObserver.unobserve(entry.target);
      }
    });
  });

  document.querySelectorAll('.vision-box-animation').forEach(obj => {
    intersectionObserver.observe(obj);
  });

  // modified code, notice _up-animated_ class that will be applied
  let intersectionObserver2 = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        setTimeout(function() {
          entry.target.classList.add('up-animated');
        }, timer);
        timer += 50;
        intersectionObserver.unobserve(entry.target);
      }
    });
  });

  document.querySelectorAll('.vision-box').forEach(obj => {
    intersectionObserver2.observe(obj);
  });
});

.vision-box,
.vision-box-animation {
  /* Animation Settings */
  transform: translateY(+100px);
  width: 200px;
  height: 200px;
  opacity: 0;
}

.vision-box-animation {
  animation: fadeIn ease 2s;
  animation-fill-mode: forwards;
}

.up,
.up-animated {
  transform: translateY(0);
  transition: transform ease 1s;
}


/* this class has the animation as well as the transition*/
.up-animated {
  animation: fadeIn ease 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.one {
  background-color: red;
}

.two {
  background-color: orange;
}

.three {
  background-color: yellow;
}

.four {
  background-color: green;
}

.five {
  background-color: blue;
}

.six {
  background-color: indigo;
}

.seven {
  background-color: violet;
}

.flex {
  display: flex;
}

<div class="flex">
  <div class="box">
    with fix:
    <div class="vision-box one">
      1
    </div>
    <div class="vision-box two">
      2
    </div>
    <div class="vision-box three">
      3
    </div>
    <div class="vision-box four">
      4
    </div>
    <div class="vision-box five">
      5
    </div>
    <div class="vision-box six">
      6
    </div>
    <div class="vision-box seven">
      7
    </div>
  </div>
  <div class="box">
    without fix:
    <div class="vision-box-animation one">
      1
    </div>
    <div class="vision-box-animation two">
      2
    </div>
    <div class="vision-box-animation three">
      3
    </div>
    <div class="vision-box-animation four">
      4
    </div>
    <div class="vision-box-animation five">
      5
    </div>
    <div class="vision-box-animation six">
      6
    </div>
    <div class="vision-box-animation seven">
      7
    </div>
  </div>
</div>