使用交叉观察者API瞄准多个元素

Question

我有一个交集观察者为页面上的一个元素工作，但是我现在想在页面上的另一个元素上应用一个完全不同的动画。我试过创建多个观察者，但它坏了。我尝试了另一个stackOverflow帖子，在那里我创建了一个数组，并试图使用if语句，它坏了。我仍然是相当新的JS和学习如何将逻辑应用到不同的语句，我只是卡住不理解为什么我不能针对多个元素?

const backgroundTitles = document.querySelectorAll('.section-title span')
const artLoad = document.querySelector('.artwork')
const items = [backgroundTitles, artLoad]
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.classList.toggle('bgtitle', entry.isIntersecting)
})
console.log(entries)
})
const newObserver = new IntersectionObserver(entries2 => {
entries2.forEach(entry => {
entry.target.classList.toggle('openAnimation', entry.isIntersecting)
})
})
backgroundTitles.forEach(title => {
observer.observe(title)
})
// artLoad.forEach(art => {
//   newObserver.observe(art)
// })

我肯定这是很简单的事情，我只是不明白。当我应用artload。foreach…我得到一个错误，artLoad不是一个函数?不知道为什么。

Answer 1

这是我如何应用"wow.js"在页面的多个元素上使用香草js的解决方案…

我实际上想让每个元素的动画有点不同，但不想为每个元素编写不同的JS函数，因为这会很快变得混乱。

现场演示

请注意:.
我使用每个元素"data-animate"设置要使用的动画。在我看来(和可读性)更灵活一点，但你可以选择一种不同的方式让你的JS知道要切换哪个类…

一些HTML示例

<div class="inview" data-animate="pulse">Animate me...</div>
<div style="height: 100vh;"></div><!--space-->
<div class="inview" data-animate="fadeInUp">Animate me...</div>
<div style="height: 100vh;"></div><!--space-->
<div class="inview" data-animate="fadeInLeft">Animate me...</div>
<div style="height: 100vh;"></div><!--space-->
<div class="inview" data-animate="heartBeat">Animate me...</div>

示例CSS(用于动画)- animate.css

.inview { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } }
.pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

Javascript:

const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
// get data-animate value
var cls = entry.target.getAttribute('data-animate');
entry.target.classList.toggle(cls, entry.isIntersecting);
});
},
{
root: null, // The element used as the viewport for checking visibility
rootMargin: '0px', // Margin around the root. Can have values similar to the CSS
threshold: .5  // what percentage of the target is visible
}
);
const targets = document.querySelectorAll('.inview');
for (const target of targets) {
observer.observe(target);
}