Question

这是我的第一篇文章，所以对我好一点：P

我最近尝试使用IntersectionObserver作为检查进入视口“视图”的元素的方法。我的目标是制作一些动画。

当前，我正在尝试从左侧滑动并从右侧滑动（我已经有一个可以工作的爆破！）。我有css将它们“隐藏”到侧面，并在它们的顶部（例如，这些元素位于页面的底部，当您将它们滚动到视图中时，将它们添加到每个元素）添加到每个元素的类离开屏幕并隐藏）将在视口中。这是可行的，但不幸的是我不确定它何时停止。我不知道可能发生了什么，我正在寻找一双新鲜的眼睛是否可以伸出援手，因为我没有人要问。

myApp.scroll = {
options: {
    root: null,             //should default to the document
    rootMargin: '0px 2000px 0px 2000px',    //top, right, bottom, left
    threshold: .1
},
watch: function(){
    document.querySelectorAll(".scrollIntoView").forEach( function( target ){
        target.classList.add(`--animate-${target.getAttribute('data-animationStyle')}-offset`);
        let observer = new IntersectionObserver(myApp.scroll.isVisible, myApp.scroll.options );
        observer.observe(target);
    });
},
isVisible: function( entries, observer ){
    entries.forEach( function(entry){
        if( entry.isIntersecting ){
            observer.unobserve(entry.target);
            entry.target.classList.add(`--animate-${entry.target.getAttribute('data-animationStyle')}`);
        }
    });
}
}

.scrollIntoView
    opacity: 0

.--animate-r2l
    opacity: 1
    transform: translateX(0px) !important
    transition: all .5s

.--animate-r2l-offset
    transform: translateX(2000px)

.--animate-l2r
    opacity: 1
    transform: translateX(0px) !important
    transition: all .5s

.--animate-l2r-offset
    transform: translateX(-2000px)

.--animate-implode
    opacity: 1
    transform: scale(1) !important
    transition: all .5s

.--animate-implode-offset
    transform: scale(2)

<div id="footer" class='footer --skew-t-r2l --bgColor-main'>
	<div class='footer__content --col-container --col-container-center'>
		<div data-animationStyle='l2r' class='footer__content__col --col-container_col scrollIntoView'><span class='icon icon__cool-icon'></span><span class='hideMeWhenAtSmall'>cool stuff:</span> name name
			<div class='info-sheet'>
				<div class='info-sheet__phone'><span class='icon icon__phone'></span>5555</div>
				<div class='info-sheet__email'><span class='icon icon__email'></span>email@email.com</div>
			</div>
		</div>
		<div data-animationStyle='implode' class='footer__content__col --col-container_col scrollIntoView'><span class='icon icon__cool-icon'></span><span class='hideMeWhenAtSmall'>cool stuff:</span> name name
			<div class='info-sheet'>
				<div class='info-sheet__phone'><span class='icon icon__phone'></span>5555</div>
				<div class='info-sheet__email'><span class='icon icon__email'></span>email@email.com</div>
			</div>
		</div>
		<div data-animationStyle='r2l' class='footer__content__col --col-container_col scrollIntoView'><span class='icon icon__cool-icon'></span><span class='hideMeWhenAtSmall'>cool stuff:</span> name name
			<div class='info-sheet'>
				<div class='info-sheet__phone'><span class='icon icon__phone'></span>5555</div>
				<div class='info-sheet__email'><span class='icon icon__email'></span>email@email.com</div>
			</div>
		</div>
	</div>
</div>

那是我的js和CSS（手写笔）

我观察到的所有3个元素都具有类.scrollIntoView及其各自的偏移量。当它们出现时，将添加它们各自的动画类。这适用于爆破，并且其侧面的2曾经起作用。谁能帮助诊断可能出了什么问题？

我尝试过/看到的内容：

r2l元素位于左侧3140px，l2r元素位于左侧-1619px
两个元素的顶部均为1546px
他们的交集比率是0
它们的交点rect值全为0
他们的isIntersecting是真的
尝试扩大界限
尝试检查相交区域y> 0
尝试检查intersectionRatio> 0

没有任何作用

很抱歉，如果我把帖子中的任何内容弄乱了。这可能是我在互联网上写过的第三本书。这包括社交媒体：P

JavaScript IntersectionObserver始终为true，即使不是这样

0 个答案: