html - 当父 addclass css 动画有效但删除时它们仍然什么都不做？

Question

$(document).on("scroll",function(){
  if( window.pageYOffset > 0 ) {
    $("body").addClass("scroll");
  }else{
    $("body").removeClass("scroll");
  }
})

@keyframes fade {
  0%,100% { opacity: 1 }
  30%,70% { opacity: 0 }
}

.logo{
  animation: fade 0.7s linear;
}

div{
  height: 1000px;
}
span{
  position: fixed;
  padding: 20px;
}
body.scroll span{
  animation: fade 0.7s linear;
}

@keyframes fade {
  0%,100% { opacity: 1 }
  30%,70% { opacity: 0 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>test<span>hier</span></div>

看到“hier”淡出并再次出现，但如果您滚动到顶部，它们就会静止不动。我想要再次滚动到动画顶部。如果 body 成为类滚动并且他们删除。

我怎样才能只在 css 中做到这一点？

codepen

Answer 1

编辑:我想我误解了你的问题，抱歉!所以你希望跨度在向下和向上滚动时消失？但只有一次？

---

问题出在你的淡入淡出动画关键帧上，试试:

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

我还在span中添加了scroll类(你不应该将它添加到body标签中)，并且在span中添加了一个小的transition，这样重新出现就不会显得那么突兀了。如果您在评论部分看到，我添加了一个“前进”，这样您的动画就会停在最后一个“图像”处。

span{
  position: fixed;
  padding: 20px;
  transition: opacity .4s linear;
}
span.scroll{
  animation: fade 0.7s linear forwards;  // <---- HERE
}