当动画滚动到视图中时启动它

Question

我有两个<hr>元素，它们是动画的，并且彼此移动到一起。我希望动画发生在<hr>元素出现在视图端口之后，而不是在加载页面时出现。我已经包含了我的JavaScript代码，但是这个代码没有工作；不确定我是否使用了正确的事件。

​

'use strict';

const linebreak = document.querySelector('#hero--one');
const symbolContainer = document.querySelector('.header__container-symbol')

linebreak.addEventListener('scroll', function(e) {
  e.preventDefault();

  const containerCoords = symbolContainer.getBoundingClientRect();

  symbolContainer.scrollIntoView({
    behavior: 'smooth'
  });
  linebreak.classList.remove('hidden');


})

/* Lines and Diamond above title */

.header__container-symbol {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(25, 25, 25, 1);
}

.span-D {
  align-self: center;
}

.hr-symbol {
  width: 60rem;
  display: inline-block;
  height: 0.3rem;
  background-color: #eee;
}

#hero--one {
  margin-right: 3px;
  animation: moveInLeftHr;
  animation-duration: 2s;
}

#symbol {
  font-size: 3rem;
}

#hero--two {
  margin-left: 3px;
  animation: moveInRightHr;
  animation-duration: 2s;
}

#symbol {
  color: #eee;
  margin-right: 2rem;
  margin-left: 2rem;
}

.hidden {
  display: none;
}


/* End Diamon and Lines above title */


/* KeyFrames Animations */

@keyframes moveInLeftHr {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRightHr {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

<div class="header__container-symbol">
  <span class="span-D"><hr  class="hidden hr-symbol" id="hero--one"/></span>
  <span id="symbol"> &#11033; </span>
  <span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

​

Answer 1

您可以使用交观测器API来检测元素何时与视口相交。

threshold选项被设置为1，这意味着它将检查元素何时完全位于视图端口内。

在html的顶部插入了一个测试div来演示这种行为。

​

'use strict';

const linebreak1 = document.querySelector('#hero--one');
const linebreak2 = document.querySelector('#hero--two');
const symbolContainer = document.querySelector('.header__container-symbol')

const observer = new IntersectionObserver((entries, observer) => {
  if (!entries[0].isIntersecting) return;
  linebreak1.classList.remove('hidden');
  linebreak2.classList.remove('hidden');
}, { threshold: 1 });

observer.observe(symbolContainer);

/* Lines and Diamond above title */

.header__container-symbol {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(25, 25, 25, 1);
}

.span-D {
  align-self: center;
}

.hr-symbol {
  width: 60rem;
  display: inline-block;
  height: 0.3rem;
  background-color: #eee;
}

#hero--one {
  margin-right: 3px;
  animation: moveInLeftHr;
  animation-duration: 2s;
}

#symbol {
  font-size: 3rem;
}

#hero--two {
  margin-left: 3px;
  animation: moveInRightHr;
  animation-duration: 2s;
}

#symbol {
  color: #eee;
  margin-right: 2rem;
  margin-left: 2rem;
}

.hidden {
  display: none;
}


/* End Diamon and Lines above title */


/* KeyFrames Animations */

@keyframes moveInLeftHr {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRightHr {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

<div style="height: 500px;"></div>

<div class="header__container-symbol">
  <span class="span-D"><hr  class="hidden hr-symbol" id="hero--one"/></span>
  <span id="symbol"> &#11033; </span>
  <span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

​