javascript - 如何在一个 javascript 函数中连续实现相互矛盾的 css 类以在页面上创建淡入/淡出效果？

Question

我试图让一个网页在元素完全位于窗口中时一次只显示一个元素。当元素不在窗口中时，我希望它淡出，当它完全进入 View 时，我希望它淡入。

作为初学者，在执行此操作时我唯一能想到的就是完全删除前一个类并添加相反的类，但无论我如何尝试完成此操作(主要是围绕我的元素 [i] 移动)。 style.animation = 'none' 或 null 并更改 if 语句的语法。)

我的 javascript(在 HTML 文件中):

<script>
window.onscroll=function(){fade()};
    function fade(){
      var elements = document.querySelectorAll('.block1,.block2');
      for (var i = 0; i < elements.length; i++) {
        if(elements[i].offsetTop>window.pageYOffset && elements[i].offsetTop+elements[i].clientHeight<window.pageYOffset+window.innerHeight){
          elements[i].style.animation='none';
          elements[i].style.animation=null;
          elements[i].className+=" pageFade";
          elements[i].style.opacity="1";
        }
        else{
          elements[i].style.animation='none';
          elements[i].style.animation=null;
          elements[i].className+=" outFade";
          elements[i].style.opacity="0";
        }
      }
    }
</script>

我的 CSS

.pageFade{
  animation:reveal 1.5s ease-in-out 1;
  -webkit-animation-name:reveal 1.5s ease-out 1;
}

@keyframes reveal{
  0%{opacity:0}
  100%{opacity:1}
}

.outFade{
  animation:unreveal 1.5s ease-in-out 1;
  -webkit-animation-name:unreveal 1.5s ease-out 1;
}

@keyframes unreveal{
  0%{opacity:1}
  100%{opacity:0}
}

(-webkit- 排除)

只有我的不透明度命令在起作用，我的“淡入淡出”动画不起作用...对我应该尝试什么有什么建议吗？

Answer 1

1. 使用脚本添加/删除类。
2. 然后，在类中放置您想要的样式。

<div class="block">BLOCK 1</div>
<div class="block">BLOCK 2</div>

<style>
	.block {
		width: 90px; height: 150px; background: red; margin: 6px;
		transition: opacity .9s ease-in-out;
		opacity: 1;
	}
	.fade { opacity: 0; }
</style>

<script>
    function handleFade(){
		// use const in a var that is never reasigned
		const elements = document.querySelectorAll('.block');
		// using forEach is clearer and more declarative
		elements.forEach(element => {
			// add a more expressive name to the conditions
			const condition1 = element.offsetTop > window.pageYOffset;
			const condition2 = element.offsetTop + element.clientHeight <
				  window.pageYOffset + window.innerHeight;
			// clean your if condition
			if(condition1 && condition2) element.classList.remove('fade');
			else element.classList.add('fade');
		});
    }

  // execute handleFade at the beginning in case user does not scroll.
    handleFade();

	// remove redundant anonymous function
   	window.onscroll = handleFade;
</script>

另外推荐这个帖子是为了知道how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js .

希望对您有所帮助。