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

Question

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

作为一个初学者，我在做这件事时唯一能想到的就是完全删除前一课并添加相反的内容，但无论我如何努力完成这一点（大多只是在我的元素周围移动[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> 

另外，我推荐这篇文章，以便知道如何检查一个元素的任何部分是不在视口中的香草-js 。

希望能帮助到你。